redux

• Redux 是一个独立的 JavaScript 状态管理库

安装 Redux

npm i redux

redux 三大原则

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

核心概念

• state 状态 - state 是只读的, 不推荐直接修改 state 中的原数据, 通过纯函数修改 state
• store 容器 - 管理状态
  import {createStore} from "redux"
  const store = createstore(reducer)
  - getState()获取状态
  - dispatch(action)同步发起修改
  - action:是一个对象, 对state 的修改动作,{type:"修改描述"}
  - subscribe(listener)监听及取消监听状态的变化
  - replaceReducer(nextReducer)
• reducer 纯函数 - 修改状态的场所
  - const reducer = (state,action)=>{
  switch(action.type){
  case "value" : return newState;
  }
  }
  - 纯函数
  1. 相同的输入永远返回相同的输出, 无任何副作用
  2. 不修改函数的原有输入值,生成新值
  3. 不依赖外部环境状态
  - 好处
  1. 便于测试
  2. 有利重构

react-redux

react项目中的 redux 绑定库

• 安装：npm i react-redux
  关联组件与store
• 1. connect( state => return {count: state.count})(Count)高阶函数 -从全部state中得到想要的state对象,返回一个函数
• 2. useStore 获取 store
• 3. useDispatch 获取 dispatch
• 4. useSelector 获取 state

中间件

更新的过程中，去做一些其他的事情，
dispatch ---> reducer 更新state
dispatch --> 中间件 --> reducer

异步操作中间件redux-thunk

dispatch接受参数类型:
- 参数action是对象，dispatch-->直接调用 reducer -(同步)
- ⭐参数action是函数，dispatch--> 调用该函数fn(dispatch,getState)->dispatch-->reducer -(异步)