Redux in a nutshell

README.md

Action

Plain JavaScript objects to notify the store to change, or saga middlewares to execute operations.

e.g.:

{
  type: 'ADD_ITEM',
  item: {
    title: 'Hello World'
  }
}

Action creator

Functions to return an action when invoked.

e.g.:

// an action creator which returns the above action
const addItem = item => ({
  type: 'ADD_ITEM',
  item
})

Dispatch

A verb to be used with actions.

"Dispatch an action" = "Send an action to redux store and middlewares"

Reducer

Pure functions which takes two parameter, state and action, returns the new state.

state + action => [reducer] => new state

e.g.:

const itemReducer = (state = { items: [] }, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      // always constructs a new object to return,
      // do not mutate the original state
      return {
        items: [
          ...state.items,
          action.item
        ]
      }

    default:
      // return the original state if the action is unrelated.
      return state
  }
}