cf

100 行秒懂 React、Redux、Middleware

The whole global state of your app is stored in an object tree inside a single store.

The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store.

To specify how state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.

Reducer - a function that takes a current state value and an action object describing "what happened", and returns a new state value. (state, action) => newState

The Redux state should contain only plain JS objects, arrays, and primitives. The root state value is usually an object. It's important that you should not mutate the state object, but return a new object if the state changes.

Terminology

State

可以是 objects, arrays, 或 primitives

const initialState = { value: 0 }

Action

是一個 object,可以當成是描述一個事件怎麼發生

// 可以直接定義
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

//也可以寫一個function自動產生,稱作 Action Creators
const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}