Redux Register

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.

Namespace, the core concept

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', {});

Server Side Rendering

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));

Examples

More examples check here

API

Classes

Functions

ServerState

Kind: global class

• ServerState
  • .whiteList : Set
  • .collectNamespaces(comp)
  • .collectState(params)

serverState.whiteList : Set

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());

serverState.collectNamespaces(comp)

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 |

serverState.collectState(params)

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(selector) ⇒ Array

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. |

StoreProvider(props) ⇒ ReactNode

Kind: global function

| Param | Type | Description | | --- | --- | --- | | props | Object | | | props.store | Object | redux store object | | props.children | ReactNode | | | props.extendedContext | Object | extended context |

register(namespace, options) ⇒ Object

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 |

createStore(initalState) ⇒ Object

Create redux store with some middlewares (thunk and Redux Register).

Kind: global function
Returns: Object - Redux store object.

| Param | Type | | --- | --- | | initalState | Object |