Redux解决了什么问题?
- 数据状态管理,可以数据 ==> 视图---对应
- 可以实现时间旅行,数据回退
- 方便调试,利用action和dev-tools
Redux解决了组件通信吗?
实际上redux的模型并不是组件通信,redux的核心原理实际上是利用action修改store,store变化引起组件的重新渲染。
redux的思想是置顶向下。
Redux中间件是什么?
实际上都是利用compose实现了函数返回值的链条。
总之,中间件都是对store.dispatch()的增强。
常见的中间件:
Redux-thunkRedux-toolkitRedux-saga
Redux-thunk:实际上是加了一层判断,如果action是函数就继续执行这个函数,给函数注入dispatch等参数,函数内部可以继续进行dispatch。 如果action是对象,就直接通过reducer修改store。 redux-thunk对于大型项目还是太简单了,而且写法很繁琐复杂。
toolkit:一个数据管理中间件解决方案。
Contenxt解决了什么,可以代替Redux吗?
解决了组件跨层级状态传递。
不可代替redux,context更适合封装复杂组件用,redux更适合管理整个项目数据状态。 而且context没有时间旅行,不好调试。context容易造成额外渲染,对性能不好
compose函数 redux的中间件就是用了compose函数。 把层层嵌套函数像管道一样连接起来,然后让数据穿过管道连接起来,得到最终的结果。
const compose = (...fns) => {
if (fns.length === 0) {
return (arg) => arg;
}
if (fns.length === 1) {
return fns[0];
}
return fns.reduceRight((acc, fn) => (...args) => fn(acc(...args)));
};
例子:
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const subtract = (x) => x - 3;
const composedFunction = compose(subtract, multiply, add);
console.log(composedFunction(5)); // 输出 9,解释如下:
// add(5) = 6
// multiply(6) = 12
// subtract(12) = 9
redux中dispatch是同步还是异步?
在Redux中,dispatch函数默认情况下是同步的。当你调用dispatch(action)时,Redux会立即更新状态,并且所有订阅了状态变化的监听器会在dispatch函数返回之前被调用。
redux中发起多次dispatch并不会直接带来性能问题,最后一次dispatch所带来的状态变更将是Store的最终状态。
批量处理多个dispatch,减少dispatch的次数。
import { batch } from 'react-redux';
// 在需要的地方使用批量处理
batch(() => {
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });
});
redux中间件是什么,中间件的作用是什么,它的原理是什么?
在Redux中,中间件是一种扩展Reduxdispatch函数的机制,允许你在action被发送到reducer之前进行处理。中间件是位于action被dispatch和到达reducer之间的一个环节。它的主要作用是增强dispatch功能,使你可以在action到达reducer之前进行额外的逻辑处理。
中间件的作用
- 处理异步操作:Redux本身是同步,无法处理异步操作。中间件如
redux-thunk或redux-saga允许在action创建器中执行异步操作。 - 日志记录:中间件可以用于记录action和state的变化,便于调试。
- 错误报告:中间件可以捕获和报告在
dispatch过程中发生的错误。 - 执行副作用:可以在
dispatch过程中执行副作用操作,例如调用外部API或本地存储。
中间件的原理
Redux中间件的实现依赖于函数的组合。中间件是一个函数,它接受store的dispatch和getState方法,并返回一个函数,该函数接受next方法(表示下一个中间件或reducer)。这个返回的函数再返回另一个函数,该函数接受一个action并进行处理。
Redux 中间件是扩展 Redux 功能的一种机制,它允许你在 dispatch action 和 reducer 处理 action 之间添加自定义逻辑。通过使用中间件,你可以处理异步操作、记录日志、报告错误、执行副作用等,从而增强 Redux 应用的功能和灵活性。