redux.md

Using Redux

Return to Table of Contents

Return to React

Always prefer local state instead of using redux to enhance performance and code readability

Extract complex logic from reducer to helper or middleware

Instead of

[ACTION_TYPE]: (state, action) => {
  const newData = action.payload.data.map(() => {
    /* ... */
  }).filter(() => {
    /* ... */
  })

   /* ... */

  return {
    ...state,
      /* ... */
  }
}

Use

import { formatData } from './helpers'

/* ... */

[ACTION_TYPE]: (state, action) => {

  return {
    ...state,
    data: formatData(action.payload)
  }
}

When using Redux use create reducer mapper

export function createReducer(initialState, handlers) {
  return (state = initialState, action) => {
    const handler = handlers[action.type];
    if (!handler) return state;
    return { ...state, ...handler(state, action) };
  };
}