Atsushi Yamamoto
@jumbosushi

WHY

WHAT

HOW

WHAT

HOW

Why use Redux?

What problem does Redux solve?

STATE

@christianalfoni

A data you use to populate a template

STATE

Model

View

STATE

Flux

Elm

“model view update” architecture

(action, state) => state

Immutable

WHY

WHAT

HOW

WHY

(state) => view

Action

Reducers

dispatch

oldState

Store

Action

{
  type: "EXAMPLE_ACTION",
  payload: {}
}

Redux: Simplifying Application State in JavaScript

Reducer

const initialState = {}

function reducer(state = initialState, action) {
  return state
}

Redux: Simplifying Application State in JavaScript

(state) => view

Action

Reducers

dispatch

oldState

Store

(action, state) => view

Single source of truth

"The state of your whole application is stored in an object tree within a single store."

http://redux.js.org/docs/introduction/ThreePrinciples.html

State is read-only

"The only way to change the state is to emit an action, an object describing what happened."

http://redux.js.org/docs/introduction/ThreePrinciples.html

Changes are made with pure functions

"To specify how the state tree is transformed by actions, you write pure reducers."

http://redux.js.org/docs/introduction/ThreePrinciples.html

Changes are made with pure functions

The output of a pure functions depends only on inputs

Has no side-effects

Pure functions have no state

Yuri Takhteyev - Better Functional Architecture with Redux

Changes are made with pure functions

Reducers are pure functions

Data logic is 100% separated from view logic

Yuri Takhteyev - Better Functional Architecture with Redux

ActionA

ActionC

ActionB

Kept in Store

How is it different from React?

Store ≈ this.state

Actions & Reducers ≈ this.setState

always render with from store

≈ re-render with this.setState

It's about giving the application a single state (store)

Lifting the state

Eventually, React will start doing more than it should.

The Role of the Store

- Hold the state

- Expose state by store.getState()

- Update state by store.dispatch(action)

- Add a listener with store.subscribe(listener)

Store

// Create initial state
const initialState = {
  value: null,
};

const store = createStore(reducer, initialState);

// Get current snapshot
store.getState()

http://mae.chab.in/archives/2885

Using Store

// Initiate action
store.dispatch({type: 'SOME_ACTION', value: 'EX_VALUE'});


// Called once there is change in state
store.subscribe(() => {
    // Do something
});

http://mae.chab.in/archives/2885

Reducer

// Reducer
testReducer(state, action) => {
  switch (action.type) {
    case SOME_ACTION:
      return Object.assign({}, state, {
        value: action.value,
      });
    default:
      return state;
  }
}

http://mae.chab.in/archives/2885