What is Redux?

What is Redux?

• Open source JavaScript library for managing application state

What is Redux?

• Open source JavaScript library for managing application state

• Created by Dan Abramov and Andrew Clark

What is Redux?

• Open source JavaScript library for managing application state

• Created by Dan Abramov and Andrew Clark

• Partners well with React

What is Redux?

• Open source JavaScript library for managing application state

• Created by Dan Abramov and Andrew Clark

• Partners well with React

• Created in response to growing application state complexity

Redux Pattern Overview

State

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

Actions

                            { type: 'ADD_TODO', text: 'Go for walk' }
                            { type: 'TOGGLE_TODO', index: 1 }
                            { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Reducers

                            






                        function visibilityFilter(state = 'SHOW_ALL', action) {
                          if (action.type === 'SET_VISIBILITY_FILTER') {
                            return action.filter
                          } else {
                            return state
                          }
                        }
                        
                        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
                          }
                        }

                        






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

Three Fundamentals of Redux

Single Source of Truth

State is Read-Only

Changes Use Pure Functions

Redux: Actions

• payloads of information
• only source of information for the store
• sent using store.dispatch()

// example declaration of action
const ADD_TODO = 'ADD_TODO'

// example of action being 'dispatched'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

Redux: ActionCreators

• returns actions

// example declaration of action
const ADD_TODO = 'ADD_TODO'

// example of action creator
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

// the result of action creator is passed into dispatch
dispatch(addTodo(text)) // const boundAddTodo = text => dispatch(addTodo(text))

Redux: Reducers

• pure function that takes previous state, action, and returns resulting state

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

Redux: Store

• brings actions (what happened) together with reducers (how to handle what happened)

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

Data Flow and Lifecycle

• store.dispatch(action)
• Redux store calls the reducer function
• Root reducer combines multiple reducers
• Redux store saves the state tree