simple-redux-reducer v1.0.2

Simple-Redux-Reducer

Simple redux reducer is a dead simple facade for CRUD operations.

Usually the boilerplate that we create when we are writing new reducers is something like:

const initialState = { /* some state */ }
export default Products(state = initialState, action) {
  switch(action.type) {
    case 'PRODUCTS_FETCH_START':
      return {
        ...state,
        error: null,
        fetching: true,
      }
    case 'PRODUCTS_FETCH_SUCCEEDED':
      return {
        ...state,
        error: null,
        data: action.payload,
      }
    case 'PRODUCTS_FETCH_FAILED':
      return {
        ...state,
        error: action.error,
      }
    case 'PRODUCTS_FETCH_FINALLY':
      return {
        ...state,
        fetching: false,
      }
    ... AND SO ON...
  }
}

this library is intended to reduce the boilerplate, using composition over inheritance. So the above code is rewritten into this:

const { fetchStart, fetchSucceeded, fetchFailed, fetchFinally } from 'simple-redux-reducer'

const initialState = { /* some state */ }

export default Products(state = initialState, action) {
  switch(action.type) {
    case 'PRODUCTS_FETCH_START':
      return fetchStart(state, action)
    case 'PRODUCTS_FETCH_SUCCEEDED':
      return fetchSucceeded(state, action)
    case 'PRODUCTS_FETCH_FAILED':
      return fetchFailed(state, action)
    case 'PRODUCTS_FETCH_FINALLY':
      return fetchFinally(state, action)
    ... AND SO ON...
  }
}

This library have reducer handlers for the following events:

• fetchStart
• fetchSucceeded
• fetchFailed
• fetchFinally
• createStart
• createSucceeded
• createFailed
• updateStart
• updateSucceeded
• updateFailed
• deleteStart
• deleteSucceeded
• deleteFailed

The State is modeled by the following,

for the example above, the state would look like this:

{ products: { data: { ...product, loading, deleting, error, provisory_id }, error: String, loading: Boolean, } }

The reducers, for fetching a list, will try to populate the data attribute, if it can't, it will populate the error attribute with a string, the string will depend on what your server did answer. Loading will be set to true when you handle fetchStart, and will be turned off when you call fetchFinally.

For creating an entity, you must call createStart:

createStart(state, { payload: { ...product, provisory_id: 'a unique provisory id' }})

The state will be updated with the new product in the list data, and with a loading attribute set to true. After you created the atribute, you must call updateFailed or updateSucceeded with an object containing the id of the newly created item and the provisory_id. This strategy works when you are generating the id of the entity on the server, so this can work with mongodb or other database like mysql that generates the id on the client.

createSucceeded(state, {_id: 'new id', provisory_id: 'a unique provisory id' })

If you don't know how to make a provisory id or you need a lightweight solution you can try this:

const makeProvisoryId = () => Math.random().toString(36).substring(2)

this README is a WIP