redux-dsm is an easier way to handle async state. v3.0.0 has simplified state graphs. Yay! #reactjs #redux

  • Since I switched to Redux, I handle all of my view state transitions by dispatching action objects, and that requires writing a bunch of boilerplate, such as action types (e.g., ), and action creators (which your view or service layers can call to create actions without forcing you to import…
  • is an object with camelCased keys and strings corresponding to your state transitions.
  • For the above example, it returns: – – will be an object with camelCased keys and function values corresponding to your state transitions.
  • For each transition, an action creator is created which will automatically fill in the correct action type, and pass through to the state.
  • The example fetch state machine will produce the following : – – is a normal Redux reducer function that takes the current state and an action object, and returns the new state.

redux-dsm – Declarative state machines for Redux: Reduce your async-state boilerplate.

GitHub is home to over 20 million developers working together to host and review code, manage projects, and build software together.

Declarative State Machines for Redux: Reduce your async-state boilerplate..

Ready for production testing. Please kick the tires and file an issue if you have bug reports, suggestions, or questions.

And then in your file :

import dsm from ‘redux-dsm’;

Or using CommonJS modules :

var dsm = require(‘redux-dsm’);

Your state isn’t always available synchronously all the time. Some state has to be loaded asynchronously, which requires you to cycle through UI states representing concepts like fetching, processing, error, success, and idle states. In fact, a simple ajax fetch might have up to 7 transitions leading into 4 different states:

Your view code will look at the status and payload to determine whether or not to render spinners, success messages, error messages, empty states, or data. I don’t know about you, but I sometimes forget some of those transitions or states.

Every app I’ve ever written needs to do this a bunch of times. Since I switched to Redux, I handle all of my view state transitions by dispatching action objects, and that requires writing a bunch of boilerplate, such as action types (e.g.,

), and action creators (which your view or service layers can call to create actions without forcing you to import all those action type constants…

GitHub