redux-register

6.0.1 • Public • Published

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

ServerState

Functions

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

ServerState

Kind: global class

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

Readme

Keywords

Package Sidebar

Install

npm i redux-register

Weekly Downloads

2

Version

6.0.1

License

MIT

Unpacked Size

20.6 kB

Total Files

8

Last publish

Collaborators

  • dexbol