Redux

54 阅读3分钟

Redux解决了什么问题?

  1. 数据状态管理,可以数据 ==> 视图---对应
  2. 可以实现时间旅行,数据回退
  3. 方便调试,利用action和dev-tools

Redux解决了组件通信吗?

实际上redux的模型并不是组件通信,redux的核心原理实际上是利用action修改store,store变化引起组件的重新渲染。

redux的思想是置顶向下

Redux中间件是什么?

实际上都是利用compose实现了函数返回值的链条。

总之,中间件都是对store.dispatch()的增强。

常见的中间件:

  • Redux-thunk
  • Redux-toolkit
  • Redux-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之前进行额外的逻辑处理。

中间件的作用

  1. 处理异步操作:Redux本身是同步,无法处理异步操作。中间件如redux-thunkredux-saga允许在action创建器中执行异步操作。
  2. 日志记录:中间件可以用于记录action和state的变化,便于调试。
  3. 错误报告:中间件可以捕获和报告在dispatch过程中发生的错误。
  4. 执行副作用:可以在dispatch过程中执行副作用操作,例如调用外部API或本地存储。

中间件的原理

Redux中间件的实现依赖于函数的组合。中间件是一个函数,它接受storedispatchgetState方法,并返回一个函数,该函数接受next方法(表示下一个中间件或reducer)。这个返回的函数再返回另一个函数,该函数接受一个action并进行处理。

Redux 中间件是扩展 Redux 功能的一种机制,它允许你在 dispatch action 和 reducer 处理 action 之间添加自定义逻辑。通过使用中间件,你可以处理异步操作、记录日志、报告错误、执行副作用等,从而增强 Redux 应用的功能和灵活性。