Skip to content

Redux Agent alpha

In Redux/React applications, changes to state drive UI effects whereas dispatched actions drive network (and other) effects. The developer must learn two ways of managing effects and then keep track of business logic scattered between middleware and reducer.

With Redux Agent, all effects can be driven through state changes, making the reducer the Single Source of Logic, similarly to the state tree being a Single Source of Truth.

Example

Request data from an HTTP API and display it when received:

const reducer = (state = { user: null }, action) => {
  switch(action.type) {
    case 'FETCH_USER':
      return HttpAgent.addTask(state, {
        method: 'get',
        url: 'http://jsonplaceholder.typicode.com/users/1'
      }, { 
        success: 'USER_SUCCESS' 
      })

    case 'USER_SUCCESS':
      return { 
        ...state, 
        user: action.payload 
      }

    default:
      return state
  }
}

“But I thought reducers must be pure?”

Yes. In fact, no network request is sent in the example above. The information describing a request is stored in Redux state and then used to generate network output and handle network input, just like the information describing an interface is stored in Redux state and then used to generate user output and handle user input.

For an in-depth introduction, see the introduction and tutorial.

Documentation

Credits

Icon by Setyo Ari Wibowo.