redux的核心知识点
1，store
仓库。在redux中维护一个全局唯一的store来存储状态，他通过ConfigureStore(reducer函数)创建。
他的特征是提供一个getState函数用来获取状态，但是他并没有提供setState方法，唯一修改state的方式就是发起一个action。
2，action
动作。action就是一个带有type属性的普通js对象，redux中统一使用action对象来描述发生了什么，例如在触发点击事件后通过action来更新state。
示例：
{ type: 'todos/ADD_TODO', payload: 'Go to swimming pool' }
{ type: 'todos/TOGGLE_TODO', payload: 1 }3，Action Creater
动作创建器。他是一个函数，用来创建并返回一个action对象。
示例：
const addTodo = (text) => {
return {
type: 'todos/ADD_TODO',
payload: text
}
}4，reducer
缩减器。reducer是一个js函数，他的作用是把state和action作为其参数，并将二者联系起来，通过相应的逻辑来决定并返回更新后的state。
示例：
function todos(state = [], action) {
switch (action.type) { // 判断action的行为
case 'todos/ADD_TODO': // 添加
return state.concat([{ text: action.text, completed: false }]);
case 'todos/TOGGLE_TODO': // 切换
return state.map((todo, index) =>
action.index === index
? { text: todo.text, completed: !todo.completed }
: todo
);
// 都没匹配到，返回原来的 state 不变
default:
return state
}
}5，dispatch
发送方法。他是Redux中store的一个方法，唯一修改state的方式就是调用store.dispatch(action对象)（即第1节说的发起一个action）。
示例：
store.dispatch({ type: 'counter/increment' });
// action Creater创建action
const addTodo = (text) => {
return {
type: 'todos/todoAdded',
payload: text
}
}
store.dispatch(addTodo());4，单向数据流
state（数据源） --------渲染出----------> view（UI）
^ |
| |
触发更新 用户交互(例如点击)
| |
| |
------------------ action <----------------
5，redux生态介绍
- 中间件：
中间件都是用来简化redux的开发，他存在于action和store中间，是对于dispatch方法的包装。例如redux-thunk。
- Redux核心包：
redux是一个非常小的库，他的的核心包只有一些基础的API，例如创建一个redux的存储实例（createStore）、合并多个reducer、合并多个中间件等。这意味着其他的相关逻辑都需要自己编码实现。
- Redux-thunk中间件：
简化redux开发。改造store.dispatch，主要实现了异步请求的支持。
- Redux-saga中间件：
简化redux开发。用于管理代码副作用的库。
- redux-promise中间件：
简化redux开发。另一种异步请求的解决方案，让Action Creater返回一个promise对象
- Redux DevTools插件：
用来在浏览器调试，有效地调试应用程序。
- React-redux库：
官方提供的UI绑定库，在内部实现了许多的性能优化，可以选用。他的两个核心就是connect方法和Provider组件。
理解：
- React是一个状态机，用来构建界面。他有自己的状态管理机制，通过状态来渲染页面，通过setState修改状态。
- Redux是独立出来的一个状态管理工具，只用来管理状态。除了在react中，他还可以在vue、js、jquery中使用。
- React-redux就是将React和Redux连接起来，将redux组件拆分成纯UI展示的，和负责处理逻辑和数据状态的两种组件，然后通过一个connect方法将两种组件连接起来。
connect方法：
有两个主要的可选参数，分别为mapStateToProps和mapDispatchToProps，作用分别是将state关联到props、将store.dispatch关联到props。而后在组件内使用state或者触发action，都可以从props中取值。
Provider组件：
作用是将redux的store注入到整个React应用中，然后通过Provider组件获取state对象，原理与react的context一样。
- Redux-toolkit（RTK）：
RTK还是Redux，旨在成为编写 Redux 逻辑的标准方式。
他是官方推荐的，是对redux二次封装的库，提供了开箱即用的工具集，大大的简化了redux的逻辑编码，解决了redux开发要手动编写的副作用钩子和上百个中间件，而逃不开的各种中间件与其目录规范......
同时建议使用@reduxjs/toolkit包，不再使用旧的redux核心包。
原文地址：https://blog.csdn.net/wjs0406/article/details/136848736
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！