redux-cube
Redux Cube is an app state manager. It is part of my effort to simplify the usage of all 'mainstream' tools and best practices mentioned in the Spellbook of Modern Web Dev. It can reduce boilerplate and support many patterns (like Sub App, Reducer Bundle, ...)
Slides: Introduction to Redux Cube
npm install --save redux-cube
createCube
API and webcube's SSR feature
New docs based on the new Coming soon!
Examples
Old docs
Overview
Action Type
// sampleApp/hub.js; ;
createHub
returns a Hub
instance which is an namespace manager of action types and a set of helper functions used to generate standard action object (follow Flux Standard Action and other best practices) and action creators.
// sampleApp/actions/sample.js; const actions types typeDict = hub;
const actions types typeDict = hub;
const actions types typeDict = hub;
const actions types typeDict = hub;
The above codes are equivalent.
console// {// 'NAMESPACE/MORE_NAMESPACE/MY_TYPE': defaultActionCreator,// } console// {// namespace: {// moreNamespace: {// myType: 'NAMESPACE/MORE_NAMESPACE/MY_TYPE',// },// },// } console// {// namespace: {// moreNamespace: {// myType: defaultActionCreator,// },// },// }
The defaultActionCreator
is equivalent to:
type: 'NAMESPACE/MORE_NAMESPACE/MY_TYPE' payload: defaultPayloadCreator meta: undefined
The defaultPayloadCreator
is equivalent to:
a
Action Creators
const actions types typeDict = hub;
const actions types typeDict = hub;
actionsnamespacemoreNamespace;// ortypeDict'NAMESPACE/MORE_NAMESPACE/MY_TYPE'10;// results:// {// "type": "NAMESPACE/MORE_NAMESPACE/MY_TYPE",// "payload": 10// }
actionsnamespacemoreNamespace;// ortypeDict'NAMESPACE/MORE_NAMESPACE/MY_TYPE_4'1 10;// result:// {// "type": "NAMESPACE/MORE_NAMESPACE/MY_TYPE_4",// "payload": { data: 11 },// "meta": { "a": 1, "b": 10 }// }
Reducers
// sampleApp/reducers/sample.js; const reducer = hub;
Async Action Creators / Side Effects
For common needs:
For API-related needs:
For complex needs:
// sampleApp/actions/users.js;// https://www.npmjs.com/package/hifetch;; const actions types typeDict = hub; // handle by redux-observableconst epics = action$;
// sampleApp/reducers/users.js;; const reducer actions types typeDict = hub;
How to use redux-cube with redux-source:
See webcube-examples
Ducks Modular / Reducer Bundle
Original Ducks Modular:
// widgets.js // Action Types // Action Creators // Side Effects// e.g. thunks, epics, etc // Reducer
For reference:
Redux Cube's Reducer Bundle:
// sampleApp/ducks/actions/sample.js; const actions types typeDict = hub;
// sampleApp/ducks/sample.js;; const reducer actions types typeDict = hub; const epics = action$;
; console;// {// myType1: asyncActionCreator1,// myType2: asyncActionCreator2,// myType3: defaultActionCreator,// myType4: defaultActionCreator,// } console;// {// MY_TYPE_1: asyncActionCreator1,// MY_TYPE_2: asyncActionCreator2,// MY_TYPE_3: defaultActionCreator,// MY_TYPE_4: defaultActionCreator,// }
It is highly recommended to use "duck" files as the only authoritative sources of action types and action creators.
Action files should be only used by "duck" files. They should be totally transparent to all other code.
Because hub.handle
can automatically add actions for undeclared action types, you only need to manually call hub.add
(and maybe write them in a separate action file) when these actions have side effects
Connect to React Components
// sampleApp/containers/Sample.jsx;;; @ @Bind { thispropsactionstodo; } { const input items count = thisprops;
Te above code is equal to
// ...; @
mapDispatchToProps
option can be used together with actions
option.
mapStateToProps
option can be used together with selectors
option.
Sub-Apps
// multipleTodoApp/todo/index.jsx;;;; ;;; @ { return <Sample />; } const App = TodoApp;
// multipleTodoApp/index.jsx;;;;; const JediTodoApp = <TodoApp title="Jedi Todo" routePath="/jedi-todo" appConfig= persistKey: 'jediTodoRoot' devToolsOptions: name: 'JediTodoApp' preloadedState: typeof window !== 'undefined' && window_preloadJediTodoData />;const SithTodoApp = <TodoApp title="Sith Todo" routePath="/sith-todo" appConfig= persistKey: 'sithTodoRoot' devToolsOptions: name: 'SithTodoApp' preloadedState: typeof window !== 'undefined' && window_preloadSithTodoData />; @ { const TodoApps = <div> <JediTodoApp /> <SithTodoApp /> </div> ; const JumpToDefault = <Redirect to="jedi-todo/" />; return <Switch> <Route path="/" exact=true render=JumpToDefault /> <Route path="/" render=TodoApps /> </Switch> ; } const App = EntryApp;
Immutable
Frozen plain object + immutability-helper / icepick / seamless-immutable / dot-prop-immutable / object-path-immutable / timm / updeep
@
;; const reducer actions types typeDict = hub;
ImmutableJS object + redux-immutable
@
API
redux-cube
createApp
It's mainly a wrapper of redux API and some must-have action middlewares, store enhancers, high-order reducers and high-order components.
It provides the support for Sub-App pattern (React component with its own isolated Redux store)
Options
reducers
reducer
epics
disableDevTools
devToolsOptions
disableFreezeState
loggerConfig
- promiseMiddlewareConfig`
preloadedState
middlewares
priorMiddlewares
enhancers
priorEnhancers
storeListeners
createHub
An superset and enhanced implement (almost a rewrite) of redux-actions.
It provides the support for namespace management and Reducer-Bundle-or-Ducks-Modular-like pattern
Options:
delimiter
connect
It's mainly a wrapper of react-redux and reselect
Options:
selectors
transform
mapStateToProps
actions
actionsProp
mapDispatchToProps