This document is for v5, for old versions is here .
Redux Register created in 2015, There was a problem that how to split code
when use redux then, and redux-toolkit
have not created. now Redux Register
included some awesome features from redux-toolkit and react-react.
The core concet in Redux Register is namespace. the namespace is a tree like in LDAP.
ROOT
|
|
---------------------
| |
BRANCH LEAF
|
------------
| |
LEAF LEAF
Leaves can store state, branches can not. for example:
import {register} from 'redux-register';
register('page.one', {});
// ✅ It's ok
register('page.two', {});
// ✅ It's ok
register('metadata', {});
// ❌ Can't do this, page.one is a branch now.
register('page.one.module', {});
Redux Register v5 make SSR painless. You can define getServerState
method
when registering namespace:
import {register} from 'redux-register';
register('page.one', {
initialState: {
list: []
},
async getServerState({request}) {
// Query database or fetch API
// then return state.
return ['state', 'from', 'server'];
}
});
Then you can use collectServerState
function create a initial state object
from all namspaces that define getServerState
:
import {collectServerState} from 'redux-register/serverstate';
// {
// page: {
// one: {
// list: ['state', 'from', 'server']
// }
// }
// }
console.log(await collectServerState({request: 'http request object'}));
collectServerState
function will perform all getServerState
method in the
whole app. It will bring negative impact. for example, a online shop website,
register products list and product details namespace, the home page only need
products list state, but the product details state also created from database.
There is a performance problem. We can use ServerState
object resolve this.
import {ServerState} from 'redux-register/serverstate';
var serverState = new ServerState();
// collect which namespaces used (by useStore hook) in HomePage.
serverState.collectNamespaces(<HomePage />);
console.log(await serverState.collectState(parameter));
More examples check here
- useStore(selector) ⇒
Array
useStore hook.
- StoreProvider(props) ⇒
ReactNode
- register(namespace, options) ⇒
Object
Register a namespace.
- createStore(initalState) ⇒
Object
Create redux store with some middlewares (thunk and Redux Register).
Kind: global class
A Set Object that store which namespaces should be collected in server. Your can change this property manually.
Kind: instance property of ServerState
Example
var serverState = new ServerState();
// If HomePage doesn't need pageMetadata, you can add it manually.
serverState.whiteList.add('pageMetadata');
await serverState.collectNamespaces(<HomePage />);
// Will include pageMetadata.
console.log(serverState.collectState());
Kind: instance method of ServerState
Param | Type | Description |
---|---|---|
comp | ReactElement |
Collect all namespaces that ReactComponent used by useStore hook, collected namespaces added to the whiteList property |
Kind: instance method of ServerState
Param | Type | Description |
---|---|---|
params | Object |
Performance getServerState methods from namespace that in whiteList. parameter will pass to getServerState : |
Example
register('pageMetadata', {
async getServerState({pathname}) {
// /page/one
console.log(pathname);
}
});
var serverState = new ServerState();
serverState.collectState({pathname: '/page/one'});
useStore hook.
Kind: global function
Returns: Array
- A array of state and dispatch.
Param | Type | Description |
---|---|---|
selector | function |
the first argument is the root state. |
Kind: global function
Param | Type | Description |
---|---|---|
props | Object |
|
props.store | Object |
redux store object |
props.children | ReactNode |
|
props.extendedContext | Object |
extended context |
Register a namespace.
Kind: global function
Param | Type | Description |
---|---|---|
namespace | string |
e.g. 'user' or 'user.profile' |
options | Object |
|
options.initialState | Object |
|
[options.init] | function |
the function to initialize the state, the first argument is the initialState |
[options.getServerState] | function |
should return a promise or a async function |
Create redux store with some middlewares (thunk and Redux Register).
Kind: global function
Returns: Object
- Redux store object.
Param | Type |
---|---|
initalState | Object |