Important Redux concepts culled out from redux.js.org

gistfile1.txt

Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. 

These restrictions are reflected in the three principles of Redux.
 - State is single source of truth
 - State is read-only
 - Changes are made with pure functions

Key terms and concepts:

State:
This object is like a “model” except that there are no setters.

Ex:
{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Note: You'll often find that you need to store some data, as well as some UI state, in the state tree. This is fine, but try to keep the data separate from the UI state.
 
Note: Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app's state as a database. This approach is described in normalizr's documentation in detail. For example, keeping todosById: { id -> todo } and todos: array<id> inside the state would be a better idea in a real app
 

Actions: Javascript object which expresses intent to change the state.
To change something in the state, you need to dispatch an action. 
An actions are plain JavaScript objects and can act like breadcrumbs of what has happened to the state (series of dispatched intents).
Actions are payloads of information that send data from your application to your store.

Ex:
{ type: 'ADD_TODO', text: 'Go to swimming pool' } - intent to add a new todo item with text 'Go to swimming pool'
{ type: 'TOGGLE_TODO', index: 1 } - intent to toggle completed state of a todo item at a given index of todos list
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' } - Intent to set visibility filter


Note: Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of reducers.


Reducer:
 To Tie state and actions together, we write a function called a reducer. 
 takes state and action as arguments, and returns the next state of the app
 
 Ex:
 function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}



function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Note: Reduers are pure functions, they dont 
    - Mutate its arguments;
    - Perform side effects like API calls and routing transitions;
    - Call non-pure functions, e.g. Date.now() or Math.random().
    
 Pure function: Given the same arguments, it should calculate the next state and return it. No surprises.