JSPM

  • Created
  • Published
  • Downloads 166
  • Score
    100M100P100Q83087F

Dispatch reducers

Package Exports

  • repatch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (repatch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Repatch

Dispatch reducers

The most of redux projects do not need sctrict action administration. Action types, action creators and reducers' action handlers are mutually assigned to each other.

The simplest way to keep immutable action controlled dataflow is dispatching pure functions (as reducers) to the store.

So we have only actions which return reducers.

const resolveFetchingUsers = users => state => ({
  ...state,
  users,
  isFetching: false
});

Installation

npm install repatch

How to use

import Store from 'repatch';

const store = new Store(initialState);

Repatch's interface is the same as Redux, therefore you can use with react-redux.

store.subscribe(() => console.log(store.getState()));

store.dispatch(resolveFetchingUsers(users));

Async actions

In async actions reducer returns a function (delegate).

const updateUser = delta => state => async (dispatch, getState) => {
  const editedUserId = getState().editedUser;
  dispatch(toggleSpinner(true));
  await api.updateUser(editedUserId, delta);
  await dispatch(fetchUsers());
  dispatch(toggleSpinner(false));
};

Subreducers

We do not need to reduce always the whole state of the store. A good practice to avoid this effort is using subreducers.

Let's suppose we have the following state:

const store = new Store({
  userManagement: {
    users: [...],
    isFetching: false,
    error: null 
  }
});

Then we can make a subredcer for the userManagement section:

const reduceUserManagement = reducer => state => ({
  ...state,
  userManagement: reducer(state.userManagement)
});

After that reducing only the userManagement state it's easy:

const rejectFetchingUsers = error =>
  reduceUserManagement(state => ({ ...state, error, isFetching: false }));