Redux

jakubniechcial

What is redux?

Redux is a predictable state container for JavaScript apps.

Three pillars of Redux

Single source of truth

State is read-only

Pure functions

Store

Holds state of the application in one object

Is fully immutable

Change = new state object

{
  todos: [{ id: '1', ...}, ...],
  activeToDo: 2,
}

Actions

Payloads of information that send data from your application to your store

{
  type: ADD_TODO,
  id: 2,
  text: 'Build my first Redux app'
}

Reducers

Pure functions - same input, same output

function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {...state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            id: action.id,
          }
        ]
      };    
    default:
      return state
  }
}

Data flow

Dispatch action

Store calls reducer

Reducer returns state

State updates props

Thanks