Redux 101 – Disclaimer – Background



Redux 101 – Disclaimer – Background

0 1


redux-101

Intro to redux talk for JAWAD on 26.1.16

On Github jchristianhall / redux-101

Redux 101

http://christianhall.me/redux-101/

Christian Hall

Lead Developer @ Good

Agency in town focused on building good apps and websites for startups and agencies

Redux 101

  • Background
  • Principles
  • Basics
  • Example
  • Reasoning
  • Extras
  • Resources

Disclaimer

Do I need Redux to write good React apps?

Should I switch from (insert framework) to React + Redux right now?

Will my app/startup/life fail if I'm not using Redux?

NO

Use what works for you. If you like some of the ideas behind Redux, use it or find a way to use the ideas with your stack.

Background

Discuss origins of redux, Facebook's notification story and issues with mvc, flux

MVC

Does your MVC app look like this? Maybe, maybe not. A bit contrived

Flux

Not exactly the same as the mvc example

Flux

Can get complex. important thing to note is single direction and predictability

Motivation

  • Increasing front end complexity
  • Poor state management
  • Mutations and asynchronicity
Reasons why two way data flow and existing solutions aren't working

Inspiration

  • Flux ((state, action) => state)
  • Elm (Functional language based on model-view-update)
  • Immutable

Principles

Single source of truth

State is read only

Changes are made with pure functions

Single source makes universal apps easier. Read only means no state changes from unexpected places. Order is enforced Pure functions mean no side effects and predictable architecture. Just add more reducers Easier debugging, testing, etc.

Redux

Actions

Plain JavaScript Objects

Only source of information for the store (via dispatch)

Must have a type

Action creators are just functions that return actions

Actions

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

Reducers

Specifiy how app's state changes in response to an action

(previousState, action) => newState

Must be pure functions

Can be composed to manage different parts of state tree

Reducers

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

Store

Holds application state

Allows access to state via getState()

Allows state to be updated via dispatch(action)

Handles low level listeners

Data flow

An action is dispatched The store calls the reducer function(s) The root reducer combines the output of all reducers The store saves the complete state tree from the root reducer

Usage with React

Requires react-redux for bindings

Component hierarchy should match state tree design

Container and presentational components

Example

Reasoning

Pros

  • Documentation
  • Ecosystem + Ergonomics
  • Community + Dan Abramov
  • Just JavaScript
  • Easy Onboarding
  • Essentially Finished

Cons

  • New and Unproven
  • Paradigm Shift
  • JavaScript Fatigue
  • Boilerplate

Extras

  • Middleware
  • Async Operations
  • Immutable
  • Normalizr
  • Routing
  • Webpack
  • Other Frameworks

Resources

fin

Sources

http://staltz.com/unidirectional-user-interface-architectures.html https://medium.com/brigade-engineering/what-is-the-flux-application-architecture-b57ebca85b9e#.8aiad2fmc
Redux 101 http://christianhall.me/redux-101/