轻松玩转Redux-Toolkit：AntdPro-Simple实战教程

2023-09-19 04:24:01

Redux-Toolkit：AntdPro-Simple中简化Redux开发的终极指南

简介

在前端开发领域，Redux是一种流行的状态管理库，Redux-Toolkit则是它的官方工具包，提供了一系列简化Redux开发的有用功能。在本教程中，我们将深入探讨如何在AntdPro-Simple中利用Redux-Toolkit，以及如何配置持久化存储。

Redux-Toolkit的强大功能

创建Slice

Redux-Toolkit引入了createSlice API，使创建管理状态的Slice变得轻而易举。Slice是Redux中状态管理的基本单元，createSlice简化了它们的创建过程。

使用Immer

Redux-Toolkit集成了Immer，一个用于更新状态而不使用可变变量的库。这消除了在使用Redux时常见的可变性问题，确保了状态的不可变性。

TypeScript支持

Redux-Toolkit全面支持TypeScript，使开发人员能够利用类型系统，提升代码质量和可读性。

安装Redux-Toolkit

npm install @reduxjs/toolkit

创建Redux Store

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

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

使用Redux-Toolkit

创建Slice

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

使用Redux-Toolkit Hooks

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};

配置持久化存储

安装Redux-Persist

npm install redux-persist

创建Redux-Persist配置

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

创建持久化Store

import { configureStore } from '@reduxjs/toolkit';
import { persistedReducer } from './persistConfig';

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

const persistor = persistStore(store);