Redux Toolkit 从入门到实践，帮你快速构建Redux应用！

前端

2023-12-26 15:38:21

Redux Toolkit概述

Redux Toolkit是一个官方维护的Redux工具包，它集成了Redux、Redux Thunk和Reselect库，为构建Redux应用程序提供了更简便、更强大的方式。Redux Toolkit提供了以下主要特性：

使用configureStore()方法创建Redux store，从而简化了Redux store的创建过程。
使用createSlice()方法创建Redux reducer，从而简化了Redux reducer的创建过程。
使用createAsyncThunk()方法创建Redux thunk action，从而简化了Redux thunk action的创建过程。
使用createSelector()方法创建Redux selector，从而简化了Redux selector的创建过程。

Redux Toolkit核心概念

Redux Toolkit的核心概念包括：

Store： Redux store是用来存储应用状态的对象。
Action： Redux action是用来更新store状态的对象。
Reducer： Redux reducer是用来根据action更新store状态的函数。
Middleware： Redux middleware是用来在Redux应用程序中执行异步操作的函数。
Selector： Redux selector是用来从store状态中提取数据的函数。

Redux Toolkit使用方法

1. 安装Redux Toolkit

npm install @reduxjs/toolkit

2. 创建Redux store

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

const store = configureStore({
  reducer: {
    // 你的reducers在这里
  },
});

3. 创建Redux reducer

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

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

4. 创建Redux thunk action

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

const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    return response.json();
  }
);

5. 创建Redux selector

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

const selectUsers = createSelector(
  (state) => state.users.entities,
  (state) => state.users.ids,
  (entities, ids) => ids.map((id) => entities[id])
);