@kblue/redux-scope NPM

Redux Scope

Wrap redux for more scalable state management.

Problems To Solve

Autonomous Components

Sometimes we want to encapsulate logics into components so that they can more easily reused. Because redux mutates state with reducers, this makes encapsulating logics with component harder.

Scope can be used to partition the application state tree, allows one component takes control a branch of state tree by defining middleware and reducers specifically for this branch.

One Place Action Process

To call an API with redux, these steps need to be made:

ui dispatches a action
middleware intercepts the action and send API request
reducer changes state to reflect the fact that there is a pending API call
when receiving response, middleware dispatches another action
reducer will change state according to the response Maintaining such procedure requires modifying code from different files: ui, middleware, reducer, this can be counter-productive in large projects.

AsyncProcedure allows you to define dispatching, doing side-effects and reducer logics in a single file, so that they can be more easily worked with.