Repository files navigation

redux-struct is a toolset to keep and update async data state in Redux store when working with REST APIs. It also drastically reduces boilerplate actions and reducers when working with such APIs.

One struct is a piece of store incapsulating fetching state, data and error from one endpoint. They are referred by string ids — for example, order with id15 can be kept under struct idorder/15. Structs are initiated automatically when the first action with given id is dispatched.

All structs have the same initial structure:

{isFetching:false,data:null,error:null,}

redux-struct provides set of action creators to start fetching data on struct with given id, stop it with result or error, update or reset it. There is also a selector to get struct by its id.

There is no built-in async middleware,redux-struct is just a data level abstraction to keep all async stuff organized.

$ npm i redux-struct

Addredux-struct reducer to your root reducer:

import{combineReducers}from'redux';import{reducerasstruct}from'redux-struct';constrootReducer=combineReducers({  struct,// other reducers});

Make an async wrapper forredux-struct actions. Implementation depends from tool you choose to maintain side effects in Redux. Here is example forredux-saga:

import{put,call}from'redux-saga/effects';import{startStructFetch,stopStructFetch}from'redux-struct';importapifrom'utils/api';exportfunction*fetchStruct(structId,url){try{yieldput(startStructFetch(structId));constresult=yieldcall(api.get,url);yieldput(stopStructFetch(structId,result));return{ result};}catch(error){yieldput(stopStructFetch(structId,error));return{ error};}};

Call this async wrapper in other sagas or async action creators:

import{call}from'redux-saga/effects';import{fetchStruct}from'utils/sagas';function*fetchUser(id){const{ result, error}=yieldcall(fetchStruct,`user/${id}`,`api/user/${id}`);};

Get current state of struct from Redux store for usage in React component:

import{getStruct}from'redux-struct';constmapStateToProps=(state,props)=>{const{ userId}=props;return{user:getStruct(userId)(state),};}

The struct reducer. Should be mounted to your Redux state atstruct

Selector, gets struct by name. Will return default struct if nothing was found. Has optional second argumentgetStructState() that is used to select the mount point of theredux-struct reducer from the root Redux reducer. It defaults tostate => state.struct.

Action creator, sets structsisFetching totrue anderror tonull. Ignores other fields.

Action creator, sets structsisFetching tofalse. If payload is instance ofError, setserror to payload and keep thedata. Otherwise setsdata to payload anderror tonull.

Action creator, merges struct with payload.

Action creator, resets struct to its default state.