三个原则

¥Three Principles

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

¥Redux can be described in three fundamental principles:

单一事实来源

¥Single source of truth

应用的全局状态存储在单个 store 内的对象树中。

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

这使得创建通用应用变得容易，因为服务器的状态可以序列化并合并到客户端中，而无需额外的编码工作。单个状态树还可以更轻松地调试或检查应用；它还使你能够在开发过程中保持应用的状态，以加快开发周期。一些传统上难以实现的功能 - 例如，撤消/重做 - 如果所有状态都存储在单个树中，那么实现起来可能会突然变得微不足道。

¥This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application; it also enables you to persist your app's state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree.

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
    }
  ]
}
*/

状态是只读的

¥State is read-only

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

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

这确保了视图和网络回调都不会直接写入状态。相反，他们表达了改变状态的意图。由于所有更改都是集中的，并且按照严格的顺序一一发生，因此没有需要注意的微妙竞争条件。由于操作只是普通对象，因此可以记录、序列化、存储并稍后重放它们以用于调试或测试目的。

¥This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

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

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

使用纯函数进行更改

¥Changes are made with pure functions

要指定状态树如何通过操作进行转换，你可以编写纯 reducers。

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

reducer 只是纯函数，它接受前一个状态和一个操作，并返回下一个状态。请记住返回新的状态对象，而不是改变以前的状态。你可以从单个 reducer 开始，随着应用的增长，将其分成更小的 reducer 来管理状态树的特定部分。因为 reducer 只是函数，所以你可以控制调用它们的顺序、传递附加数据，甚至为分页等常见任务创建可重用的 reducer。

¥Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.

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 是什么了。

¥That's it! Now you know what Redux is all about.

三个原则

单一事实来源​

状态是只读的​

使用纯函数进行更改​

单一事实来源

状态是只读的

使用纯函数进行更改