Redux State
connect()
style implementation of storage a local state for reusable components
Installation
npm install --save redux-state
Implementation
;;const reducers = // ... your other reducers here ... states: statesReducerconst reducer = ;const store = ;
Usage
// Component;;;;; const mapStateToProps = ...;const mapDispatchToProps = localAction: globalAction: ...;const mergeProps = ...; const Component = ...; mapStateToProps mapDispatchToProps mergeProps localReducerComponent; // reducer const initialState = {}; const localReducer = { return state;}; ;
Async actions
Like with redux-thunk
const localAction = { ...}
Action scopes
// Action dispatched with redux dispatch function; // => { type: 'ACTION_TYPE', payload: {...} } // Action dispatched with state dispatch function; // => { type: 'LOCAL_ACTION_TYPE', payload: {...}, stateId: ... }
Local reducer
// redux reducerconst reducer = { // receives both global and local actions ...}; // local reducerconst localReducer = { // receives only local actions for concrete instance of component ...};
Connecting children to the parent state
// Root...const Root = <div> <ChildContainer/> </div>; mapStateToProps mapDispatchToProps mergeProps localReducerRoot; // Child...const Child = ...;mapStateToProps mapDispatchToProps mergePropsChild;
Like React API
... { const setState = thisprops } { const state = thisprops const foo = state ... } const initialState = foo: `bar` initialStateWithState