Skip to content

redux 中的 action 是什么?

查看详情

Action 是把数据从应用(页面上或接口请求返回处)传递到 store 的有效载荷,它是 store 数据的唯一来源。Action 本质上是一个包含 type 字段的 JS 对象。

redux 中的 reducer 是什么?

查看详情

Reducers 指定了如何响应 actions 并更新 store,actions 只是描述了有事情发生了这一事实,而reducer描述如何更新 store。

redux 的工作流程

查看详情
  • 用户点击按钮或者进入视图 dispatch 一个 action
  • store 自动调用 reducer,并传入两个参数:当前 state 和接收的 action,reducer 会返回新的 state
  • state 一旦有变化,store 就会调用监听函数,来更新 view

react-redux 是如何工作的?

查看详情

react-redux 利用 react 的 context API 将 react 和 redux 绑定起来。react-redux 提供了三个主要的 API: Provider, usDispatch, useSelector。这三个 API 的作用是:

  • Provider: 用于将 redux 的 store 注入当前应用
  • usDispatch: 提供更改 redux 的 store 的能力
  • useSelector: 提供订阅 redux 的 store 的能力

useSelector的实现原理是什么?

查看详情

useSelector 通过使用 React context 获取 Redux store,使用 selector 函数提取所需状态,并订阅 store 的变化。当 store 中的状态发生变化且影响到当前组件时,useSelector 会重新计算选取的状态并触发组件更新,从而实现数据与视图的同步。

  • selector 返回的结果可以是任何值,而不仅仅是一个对象。selector 的返回值将被作为 useSelector() hook 的返回值被使用。
  • 当 dispatch 一个 action 时,useSelector() 将对 selector 的前一个结果值和当前的结果值做一个引用比较。如果它们不同,该组件将被强制重新渲染。如果它们相同,组件将不会重新渲染。
  • useSelector() 默认使用严格的 === 引用全等检查,而不是浅层全等比较。可以修改useSelector的第二个参数以修改比较方式。

reselect 作用

查看详情
  1. 提高性能: 在没有 Reselect 的情况下,每当 Redux store 更新时,所有依赖该 store 的组件都会重新计算其需要的数据,即使这些数据实际上没有变化。这会导致性能问题,尤其是在大型应用中。Reselect 通过记忆功能解决了这个问题。只要输入参数(通常是 Redux store 的某些部分状态)没有变化,selector 就不会重新计算结果,从而避免了不必要的重新渲染和性能开销。

  2. 简化代码: Reselect 使得创建和组合 selector 更加简洁和直观。它支持将多个简单的 selector 组合成一个复杂的 selector,从而使代码更具可读性和可维护性。

redux-toolkit是什么

查看详情

Redux Toolkit(RTK)是 Redux 官方推荐的工具集,旨在简化 Redux 的使用,减少样板代码,提高开发效率。它提供了一系列简洁而强大的工具和最佳实践,以帮助开发者更容易地构建 Redux 应用。RTK 包含几个核心 API,如 configureStore、createSlice、createAsyncThunk 等。

redux-thunk的作用是什么

查看详情

redux-thunk 是一个 Redux 中间件,它的主要作用是让 Redux 能够处理异步操作。Redux 的设计理念是通过纯函数(reducer)来管理应用状态,但是在实际应用中,常常需要处理异步操作(例如,网络请求、定时任务等)。redux-thunk 通过扩展 Redux 的 dispatch 功能,使得 action creator 可以返回一个函数(thunk),而不仅仅是一个普通的 action 对象。