react（十五）redux的应用

redux

• Redux 是一个独立的 JavaScript 状态管理库
• https://www.redux.org.cn/

安装 Redux

• npm i redux
• yarn add redux

了解 redux

• state 状态
• reducer 纯函数 - 提供修改状态的方法
• store 仓库 - 管理状态
• action 动作
  • 对 state 的修改动作

state 对象

• 通常我们会把应用中的数据存储到一个对象树（Object Tree）中进行统一管理，我们把这个对象树称为：state

state 是只读的。这里需要注意的是，为了保证数据状态的可维护和测试，不推荐直接修改 state 中的原数据。

通过纯函数修改 state

• 什么是纯函数 reducer ？
  • 相同的输入永远返回相同的输出
  • 不修改函数的输入值
  • 不依赖外部环境状态
  • 无任何副作用
• 使用纯函数的好处
  • 便于测试
  • 有利重构

action 对象

• 对 state 的修改是通过 reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作，action 是一个对象
• type属性 : 表示要进行操作的动作类型，增删改查……
• payload属性 : 操作 state 的同时传入的数据

但是这里需要注意的是，我们不直接去调用 Reducer 函数，而是通过 Store 对象提供的 dispatch 方法来调用

Store 对象

• 为了对 state，Reducer，action 进行统一管理和维护，我们需要创建一个 Store 对象

redux 三大原则

• 单一数据源: 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
• state 是只读的: 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
• 使用纯函数来执行修改 state

import React from "react";
import ReactDOM from "react-dom";
import {createStore} from "redux";
function reducer(state={
  count: 1
},action) {
    switch (action.type) {
      case "ADD":
        return {
          count: state.count + 1
        }
      case "MINUS":
        return {
          count: state.count - 1
        }
    }
    return state;
}
const store = createStore(reducer);
const unSubscribe = store.subscribe(()=>{
  render();
});
function render() {
  ReactDOM.render(
    <div>
        <p>{store.getState().count}</p>
        <button onClick={()=>{
           store.dispatch({
              type: "ADD"
            })
        }}>递增</button>
        <button onClick={()=>{
           store.dispatch({
              type: "MINUS"
            })
        }}>递减</button>
         <button onClick={()=>{
           unSubscribe();
        }}>取消监听</button>
    </div>,
    document.querySelector("#root")
  )
}
render();

redux API

• createStore(reducer, [preloadedState], enhancer);
  • reducer (Function): 接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
  • [preloadedState] (any): 初始时的 state。 在同构应用中，可以决定是否把服务端传来的 state 后传给它，或者从之前保存的用户会话中恢复一个传给它。如果你使用 combineReducers 创建 - reducer，它必须是一个普通对象，与传入的 keys 保持同样的结构。否则，你可以自由传入任何 reducer 可理解的内容。
  • enhancer (Function): Store enhancer 是一个组合 store creator 的高阶函数，返回一个新的强化过的 store creator。这与 middleware 相似，它也允许你通过复合函数改变 store 接口。
  • 返回值 (Store): 保存了应用所有 state 的对象。改变 state 的惟一方法是 dispatch action。你也可以 subscribe 监听 state 的变化，然后更新 UI。
• reducer
  • reducer(state,action)
• Store
  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)
• combineReducers(reducers)
  将 reducer 函数拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分
• applyMiddleware(…middlewares) 中间件