Skip to content

Instantly share code, notes, and snippets.

@ducin

ducin/actions.ts

Last active Feb 15, 2021
Embed
What would you like to do?
redux setup
import { INC } from './constants';
export const Inc = () => ({
type: INC as typeof INC
})
export type Actions =
| ReturnType<typeof Inc>
import React from 'react'
import { connect } from 'react-redux'
import { AppState } from './state';
export const ReduxComponent = connect(
(state: AppState) => ({
count: state.count
}),
(dispatch) => ({
//
}))((props: { count: number }) => <span>{props.count}</span>)
export const INC = "INC"
import { Observable, empty, interval } from "rxjs";
import { ActionsObservable, ofType, combineEpics, StateObservable } from "redux-observable";
import { switchMapTo, tap, mapTo, withLatestFrom } from "rxjs/operators";
import { Actions, Inc } from "./actions";
import { AppState } from "./state";
export const logIncEpic = (action$: ActionsObservable<Actions>, state$: StateObservable<AppState>) => action$.pipe(
ofType("INC"),
withLatestFrom(state$),
tap(([action, state]) => console.log(action.type, state)),
switchMapTo(empty()),
)
export const each5secEpic = (action$: ActionsObservable<Actions>) => interval(5000).pipe(
mapTo(Inc())
)
export const rootEpic = combineEpics(
logIncEpic,
each5secEpic
)
import { AppState } from './state';
import { Actions } from './actions';
const initialState: AppState = {
count: 1
}
export const rootReducer = (state = initialState, action: Actions) => {
switch(action.type) {
case "INC":
return { ...state, count: state.count + 1 }
default:
return state
}
}
export type AppState = {
count: number
}
import { createStore, applyMiddleware, Store } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import { createEpicMiddleware, EpicMiddleware } from 'redux-observable'
import { rootReducer } from './reducers'
import { rootEpic } from './epics'
const epicMiddleware: EpicMiddleware<Actions, Actions, AppState> = createEpicMiddleware();
const middleware = [thunk, epicMiddleware]
import { AppState } from './state';
import { Actions } from './actions';
const composeEnhancers = composeWithDevTools({
name: "IT Corpo React App"
});
export const getStore = (): Store<AppState> => {
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers...
))
epicMiddleware.run(rootEpic);
return store;
}
@ducin

This comment has been minimized.

Copy link
Owner Author

@ducin ducin commented May 26, 2019

wejdź do głównego folderu projektu (itcorpo-react-app)

npm i redux react-redux redux-devtools-extension redux-observable redux-thunk @types/react-redux
git clone https://gist.github.com/ducin/f8d4b1fffcc84c1bf16876dd8b6876d9 src/store
rm -rf src/store/.git # aby git nie robił submodules

(ostatnia komenda zakłada że masz unixowego basha (lub git basha, jeśli jesteś na windowsie)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment