Bringing Back Redux

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

So... what about Redux?

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

Resources

  • https://redux.js.org/
  • awesome-redux
  • Egghead videos for Redux
  • https://redux.js.org/docs/introduction/Ecosystem.html
Made with Slides.com