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 -
- connect( state => return {count: state.count})(Count)高阶函数 -从全部state中得到想要的state对象,返回一个函数
-
- useStore 获取 store
-
- useDispatch 获取 dispatch
-
- useSelector 获取 state
中间件
更新的过程中，去做一些其他的事情，
dispatch ---> reducer 更新state
dispatch --> 中间件 --> reducer
异步操作中间件redux-thunk
dispatch接受参数类型:
- 参数action是对象，dispatch-->直接调用 reducer -(同步)
- ⭐参数action是函数，dispatch--> 调用该函数fn(dispatch,getState)->dispatch-->reducer -(异步)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
