Redux封装实用技巧，更方便高效！

前端

2023-10-21 09:58:12

Redux 封装的优点

使用 Redux 封装的主要优点包括：

更易于理解和维护： Redux 封装可以使 Redux 代码更易于理解和维护，因为它可以将 Redux 的各种概念和功能封装成更易于理解和使用的组件。
更少样板代码： Redux 封装可以减少 Redux 代码中的样板代码，因为它可以将 Redux 的一些常用操作封装成更高层次的函数。
更强的可测试性： Redux 封装可以提高 Redux 代码的可测试性，因为它可以将 Redux 的各种概念和功能封装成更易于测试的组件。

Redux Toolkit

Redux Toolkit 是一个用于封装 Redux 的工具箱，它可以帮助您轻松地创建和管理 Redux store。Redux Toolkit 提供了许多有用的工具，包括：

createStore()： 用于创建 Redux store 的函数。
configureStore()： 用于配置 Redux store 的函数。
createReducer()： 用于创建 Redux reducer 的函数。
createAction()： 用于创建 Redux action 的函数。
createSlice()： 用于创建 Redux slice 的函数。

如何使用 Redux Toolkit 封装 Redux

以下是如何使用 Redux Toolkit 封装 Redux 的步骤：

安装 Redux Toolkit：

npm install @reduxjs/toolkit

创建 Redux store：

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

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

创建 Redux reducer：

import { createReducer } from '@reduxjs/toolkit';

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

创建 Redux action：

import { createAction } from '@reduxjs/toolkit';

const incrementAction = createAction('increment');
const decrementAction = createAction('decrement');

使用 Redux store：

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(incrementAction())}>Increment</button>
      <button onClick={() => dispatch(decrementAction())}>Decrement</button>
    </div>
  );
};