Repository files navigation

A tiny lib (12 lines) for creating state machines as swappable Redux reducers

If you are usingImmutable JS in your stores, seeredux-machine-immutable.

redux-machine enables you to createreducers that can transition between different "statuses." These are likes states in afinite state machine. The goal is for redux-machine to support complex workflows simply while keeping all state in the redux store. Keeping all state in the store is good because:

• redux-machine works with time-travel debugging. Time-travel debugging was the mainmotivation for building redux itself.
• Debugging is easy because information is in one place (the store).
• Statuses such are queryable by the user interface. This is helpful if you want to show things to the user such as loading spinners to indicate status

npm install redux-machine --save

redux-machine internally uses Object.assign, which is an ES2015 feature. If you need to support older browsers, you can use a polyfill such ascore-js.

This is the entire API for redux-machine:

// entire API, no middleware requiredimport{createMachine}=from'./index.js'constfetchUsersReducer=createMachine({'INIT':initReducer,'IN_PROGRESS':inProgressReducer})

The reducer returned bycreateMachine will act likeinitReducer when its status isINIT and will act likeinProgressReducer when the status isIN_PROGRESS. If the store'sstate.status is undefined, the reducer forINIT is used (so it's a good idea to provide a reducer for theINIT status).

initReducer andinProgressReducer can do status transitions by settingstate.status:

constinitReducer=(state={error:null,users:[]},action)=>{switch(action.type){case'FETCH_USERS':returnObject.assign({},state,{error:null,// transition to a different status!status:'IN_PROGRESS'})default:returnstate}}constinProgressReducer=(state={},action)=>{switch(action.type){case'FETCH_USERS_RESPONSE':returnObject.assign({},state,{error:null,users:action.payload.users,// transition to a different status!status:'INIT'})case'FETCH_USERS_FAIL':returnObject.assign({},state,{error:action.payload.error,// transition to a different status!status:'INIT'})default:returnstate}}

The example above defines the following state machine:

In words:

• When the status isINIT and the action type isFETCH_USERS, the machine transitions toIN_PROGRESS status.
• When the status isIN_PROGRESS and the action type isFETCH_USERS_RESPONSE orFETCH_USERS_FAIL, the machine transitions to theINIT (initial) status.

You don't need redux-machine, since you can accomplish almost the same thing as in the example above by definingfetchUsersReducer as follows:

constfetchUsersReducer=(state,action)=>{switch(state.status){case'INIT':returninitReducer(state,action)case'IN_PROGRESS':returninProgressReducer(state,action)default:returninitReducer(state,action)}}

The (marginal) advantages of using redux-machine over just using the FSM pattern is that you can more clearly express intent and write slightly less code.

redux-machine doesn't prescribe a way of handling asynchronous effects such as API calls. This leaves it open for you to useno async effects library,redux-loop,redux-thunk,redux-saga,redux-funk oranything else.

See theRedux Funk Examples repo for examples using redux-machine andredux-funk:

• Shopping Cart Example

• Cancellable Counter Example

See theRedux Saga Examples for comparison.