redux简单用法

§ Store

首先要区分 store 和 state

state 是应用的状态，一般本质上是一个普通对象
例如，我们有一个 Web APP，包含 计数器 和 待办事项 两大功能
那么我们可以为该应用设计出对应的存储数据结构（应用初始状态）：

/** 应用初始 state，本代码块记为 code-1 **/
{
   
  counter: 0,
  todos: []
}

store 是应用状态 state 的管理者，包含下列四个函数：

• getState() # 获取整个 state
• dispatch(action) # ※ 触发 state 改变的【唯一途径】※
• subscribe(listener) # 您可以理解成是 DOM 中的 addEventListener
• replaceReducer(nextReducer) # 一般在 Webpack Code-Splitting 按需加载的时候用

二者的关系是：state === store.getState()

Redux 规定，一个应用只应有一个单一的 store，其管理着唯一的应用状态 state
Redux 还规定，不能直接修改应用的状态 state，也就是说，下面的行为是不允许的：

var state = store.getState()
state.counter = state.counter + 1 // 禁止在业务逻辑中直接修改 state

若要改变 state，必须 dispatch 一个 action，这是修改应用状态的不二法门

现在您只需要记住 action 只是一个包含 type 属性的普通对象即可
例如 { type: 'INCREMENT' }

上面提到，state 是通过 store.getState() 获取，那么 store 又是怎么来的呢？
想生成一个 store，我们需要调用 Redux 的 createStore：

import {
    createStore } from 'redux'
...
const store = createStore(reducer, initialState) // store 是靠传入 reducer 生成的哦！

现在您只需要记住 reducer 是一个 函数，负责更新并返回一个新的 state
而 initialState 主要用于前后端同构的数据同步（详情请关注 React 服务端渲染）

§ Action

上面提到，action（动作）实质上是包含 type 属性的普通对象，这个 type