1-4.Redux的三个原则.md

Redux Intro

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

Q: 为什么要状态管理？使用场景举例说明。

01. The Single Immutable State Tree

应用的整个状态state的变化都由一个JavaScript object来描述、存储。 这个对象通常被叫做state tree。

也就是说，应用中任何状态的任何改变都会被这个对象记录，前端中状态就包括the data and the UI state。

通过这个对象，我们可以精确的知道每个状态的变化情况细节，并进行追踪。

• 改变之前的状态
• 改变之后的状态
• 触发改变的因素

Q: 为什么这个状态树是 Single Immutable 的？

02. The State Tree Is Read Only

只读的状态树，要想改变它的状态就只能通过触发action来完成，而且它们严格按照队列顺序执行。

action也是一个普通的对象，用来描述触发状态改变的因素（事件）。但它必须有一个 type property <string>，用来表示change type。

The overall principle here is that the state is read only, and can only be modified by dispatching actions.

Q: action 对开发人员调试维护有什么好处？

03. Using Pure Function[Reducer] To Change State Tree

Reducer只是一些纯函数，它接收previous state和dispatched action，并返回一个next state（新的对象）。 在你的 Redux App 中，它订阅（describe）其中状态的改变。然后执行这个Reducer，并返回整个应用程序的下一个状态。

另外值得注意的是：即使在大型应用程序中，仍然只有一个函数来计算应用程序的新状态。它不一定是缓慢的：如果某些部分没有改变，它们的引用将保持原样（这种机制在计算机学科应用极广）。

当然，这个计算新状态的函数可以由许多小的纯函数组成，以使得它们可以复用。

Q: 为什么 Reducer 要是 pure Function？

注：对于什么是纯函数请参考：Pure and Impure Functions?

// Todo App
add Todo

Toggle filters
在Todo应用程序示例中，当在“All/Completed/Active”之间更改可见性时，实际项本身并没有改变，因此对todos数组的前一个版本的引用保持不变。
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'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)