Redux Fundamentals, Part 3: State, Actions, and Reducers

• Redux apps use plain JS objects, arrays, and primitives as the state values
  • The root state value should be a plain JS object
  • The state should contain the smallest amount of data needed to make the app work
  • Classes, Promises, functions, and other non-plain values should not go in the Redux state
  • Reducers must not create random values like Math.random() or Date.now()
  • It’s okay to have other state values that are not in the Redux store (like local component state) side-by side with Redux
• Actions are plain objects with a type field that describe what happened
  • The type field should be a readable string, and is usually written as 'feature/eventName'
  • Actions may contain other values, which are typically stored in the action.payload field
  • Actions should have the smallest amount of data needed to describe what happened
• Reducers are functions that look like (state, action) => newState
  • Reducers must always follow special rules:
    • Only calculate the new state based on the state and action arguments
    • Never mutate the existing state – always return a copy
    • No “side effects” like AJAX calls or async logic
• Reducers should be split up to make them easier to read
  • Reducers are usually split based on top-level state keys or “slices” of state
  • Reducers are usually written in “slice” files, organized into “feature” folders
  • Reducers can be combined together with the Redux combineReducers function
  • The key names given to combineReducers define the top-level state object keys

References
https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers