Redux and React in ES6, Ch#05

Redux React Ch#05

  • ch#05: 47~53

Redux

  • Do I need redux
  • 3 principles
  • flux vs redux
  • redux flow

Do I need Redux

When Do I need redux

  • complex data flow
  • inter-component communication
  • non-heirarchical data
  • many actions
  • same data used in multiple places

Three Core Redux Principles

3 Principles

  • One immutable store
  • Actions trigger changes
  • Reducers update state, reducer -> just a pure function (in action, out action)

Flux vs Redux

  • Data down
  • Actions up

Similarity

  • unidirectional dataflow
  • actions
  • stores

Difference

  • redux: new concepts
    • reducers: pure functions
    • containers -> necessary logic for marshalling, dumb containers
    • imuutability ->
  • Flux
    • action -> dispatcher -> store -> react
  • Redux
    • action -> store -> react
    • store <-> reducers

Flux

  • stores contain state and change logic
  • multiple stores
  • flat and disconnected stores
  • singleton dispatcher
  • react components subscribe to store
  • state is mutated

Redux

  • store and change logic are separate
  • one store
  • single store with hierarchical reducers
  • no dispatcher
  • container components utilize connect
  • state is immutable

Redux Flow Overview

  • action, store, react, reducer
  • action
{ type: RATE_COURSE, rating: 5 }
  • reducer
function appReducer(state = defaultState, action) {
  switch(action.type) {
    case RATE_COURSE:
    // return new state
  }
}

  • react
    • notifed via react-redux
COMMENTS