Redux Toolkit 入门

Redux 是 JavaScript 状态管理库,通过它可以实现状态在组件之间的统一存储和管理。然而,原生的 Redux API 设计的比较复杂,需要编写很多样板逻辑和 boilerplate 代码,对开发者略显入门门槛高。

为简化 Redux 的使用,Redux Toolkit 库被设计和创建。Redux Toolkit 集成了Redux 生态系统中很多有用的增强功能,使得编写 Redux 代码更加简单,但没有牺牲 е灵活性。

Redux Toolkit包括以下主要内容:

configureStore()

createReducer()

createAction()

createSlice()

configureStore()

Copy

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    // ... your reducers
  }
});

configureStore 是 Redux Toolkit 提供的代替 createStore() 的方法,除提供相同的功能外,还内置了一些有用的增强功能,如:

使用 devtools,方便调试
使用 immer,简化 reducer 代码
自动应用 Redux Thunk 中间件支持异步 action

createReducer()

Copy

const counterSlice = createReducer(0, {
  increment: state => state + 1,
  decrement: state => state - 1,
});

createReducer 是一个函数,用来创建 reducer。它的第一个参数是一个初始值,第二个参数是一个处理action的对象。

通过 createReducer,省去了编写大量 switch...case 的样板代码,让 reducer 更加清晰。

createAction()

Copy

const increment = createAction("increment");
const decrement = createAction("decrement");

dispatch(increment());
dispatch(decrement());

createAction 用于创建 Redux action creator。它接收 action type 作为参数,返回一个函数,当被调用时返回一个具有该 type 的 action 对象。

通过 createAction 可以简化 action creator 的编写。

createSlice()

Copy

const counterSlice = createSlice({
  name: "counter",
  initialState: 0, 
  reducers: {
    increment(state) {
      return state + 1;
    },
    decrement(state) {
      return state - 1;
    }
  }
})

createSlice 可以用来创建一个“slice”,包含:

reducer 函数
action creator 函数
action type 常量

可以节省编写大量样板代码的时间。

以上这些工具,可以让 Redux 的体验更好,降低学习成本。Redux Toolkit 已经成为 React 官方推荐的 Redux 用法。

希望通过这些内容,能够快速上手 Redux Toolkit,继续关注后续 Redux 的进阶内容!

Redux 中间件

Redux 中间件(Middleware)是一个函数,它可以提供 store 的扩展功能。中间件为 Redux 提供一个扩展点,允许我们在 action 被发送到 store 之前 intercept(拦截) action。

中间件的好处主要有以下几点:

日志和调试

使用中间件,可以打印每次 dispatch 的 action 信息,方便调试。

异步操作

比如使用 Thunk 和 Saga 中间件,可以处理 Redux action 的异步流程。

状态验证

可以用中间件验证 action,来保证状态的一致性。

路由同步

将 Redux store 变化同步到路由中。

热加载模块

监听 store 变化并热加载模块。

下面以 Redux Thunk 中间件为例,介绍中间件的使用。

Redux Thunk 中间件

Redux Thunk 允许我们在 action creator 中返回一个函数,而不仅仅是一个 action。

Copy

const incAction = () => {
  return (dispatch, getState) => {
    setTimeout(() => {
      // 这里可以拿到 dispatch 和 getState 函数
      dispatch({ type: 'INC_COUNTER' }); 
    }, 2000);
  };
};

在这个 action creator 中,我们返回了一个函数,这个函数接收 Redux store 的 dispatch 和 getState 函数。所以在这个函数中,我们可以获取 state,然后发起异步操作,最后dispatch 一个真正的 action。

这就允许我们进行 async/await 风格的操作:

Copy

const incAction = () => async (dispatch, getState) => {
  await fetch('/some/api/').then(res => res.json());
  dispatch({ type: 'INC_COUNTER' });
};

引入 Thunk 中间件

我们需要在创建 store 的时候引入 Redux Thunk 中间件。

Copy

import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  reducer,
  applyMiddleware(thunk)  
);

通过应用 thunk 中间件, Redux store 就可以理解并执行以函数形式返回的值了。

小结

Redux 中间件提供了一个很好的解决方案来拓展 Redux。主要通过 intercept action,在传递给 reducer 之前对 action 进行加工。

Redux Thunk 允许我们返回函数形式的 action creator 来支持异步逻辑。
通过 applyMiddleware() 来应用中间件,比如applyMiddleware(thunk)。
Redux中间件还包括Redux Saga、Redux Logger等,用于不同的场景。

希望通过这篇文章,能帮助你快速理解 Redux 中间件的作用和用法。

Redux Saga 入门

Redux Saga 是 Redux 的一个中间件,用于管理应用程序的副作用(Side Effects)。副作用是指State无法做到的事情,如:

API调用
加载数据
路由跳转

而不是操作UI组件的状态。

Redux Saga解决了下面这些问题:

逻辑复杂:Action 变得复杂难以维护
多个Action间依赖:某个Action依赖其他Action的结果
Dispatch 延迟:多个异步Action需要按顺序Dispatch

拓展知识学习 | 青训营笔记

Redux Toolkit 入门

configureStore()

createReducer()

createAction()

createSlice()

configureStore()

createReducer()

createAction()

createSlice()

Redux 中间件

Redux Thunk 中间件

引入 Thunk 中间件

小结

Redux Saga 入门