标签：redux 函数 04 reducer dispatch React state action Redux

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 -(异步)

标签：redux,函数,04,reducer,dispatch,React,state,action,Redux
来源： https://www.cnblogs.com/lixialian/p/15534093.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。