三大原则

Redux 可以用三个基本原则来描述

单一数据源

您的应用程序的全局状态存储在一个对象树中，该树位于单个存储中。

这使得创建通用应用程序变得容易，因为来自服务器的状态可以被序列化并水合到客户端，而无需额外的编码工作。单个状态树也使调试或检查应用程序变得更容易；它还使您能够在开发中持久化应用程序的状态，从而加快开发周期。一些传统上难以实现的功能（例如撤销/重做）突然变得很容易实现，如果您的所有状态都存储在一个单一的树中。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

状态是只读的

改变状态的唯一方法是发出一个动作，一个描述发生了什么的对象。

这确保了视图或网络回调永远不会直接写入状态。相反，它们表达了转换状态的意图。由于所有更改都是集中式的，并且按严格的顺序一个接一个地发生，因此没有微妙的竞争条件需要注意。由于动作只是普通对象，因此可以记录、序列化、存储，并在以后重新播放以进行调试或测试。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

更改通过纯函数完成

为了指定动作如何转换状态树，你需要编写纯reducers。

Reducers 只是纯函数，它们接收上一个状态和一个动作，并返回下一个状态。请记住返回新的状态对象，而不是修改上一个状态。你可以从一个 reducer 开始，随着应用程序的增长，将其拆分成管理状态树特定部分的更小的 reducer。因为 reducer 只是函数，你可以控制它们调用的顺序，传递额外的數據，甚至为常见的任务（如分页）创建可重用的 reducer。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

就是这样！现在你了解了 Redux 的核心概念。