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) 中间件