@reduxjs/toolkit Redux工具集

@reduxjs/toolkit 是 Redux 团队为简化 Redux 使用而开发的官方工具集。它提供了一系列实用工具，帮助开发者更简单、更快速地编写 Redux 代码。

以下是 @reduxjs/toolkit 提供的一些主要功能：

configureStore: 这个函数会自动将 Redux 中间件与 store 进行绑定，并设置好开发环境中的 Redux DevTools 扩展。

createReducer 和 createSlice: 这两个函数可以帮助你更简洁地编写 reducer 和 action。createSlice 会自动为你生成 action creator 和 action type，你只需要定义 reducer 即可。

createAsyncThunk: 这个函数可以帮助你处理异步逻辑。它接收一个 action type 和一个返回 Promise 的函数，然后生成一个 thunk，这个 thunk 会 dispatch pending、fulfilled 和 rejected 三种 action。

createEntityAdapter: 这个函数可以帮助你管理 normalized state，提供了一些用于更新 normalized state 的函数。

createSelector: 这是一个来自 reselect 库的函数，用于创建可记忆的 selector，可以提高 Redux 的性能。

总的来说，@reduxjs/toolkit 是一个非常实用的工具集，它可以帮助你更高效地使用 Redux。

@reduxjs/toolkit 是一个帮助简化 Redux 使用的工具集。以下是其基本用法的一些示例：

安装

首先，你需要在你的项目中安装 @reduxjs/toolkit。你可以通过 npm 或者 yarn 来安装：

npm install @reduxjs/toolkit
或者
yarn add @reduxjs/toolkit

创建一个 store

configureStore 函数可以帮助你快速创建一个 store。它会自动将 Redux 中间件与 store 进行绑定，并设置好开发环境中的 Redux DevTools 扩展。

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'


const store = configureStore({
  reducer: rootReducer
})

创建一个 reducer

createSlice 函数可以帮助你更简洁地编写 reducer 和 action。它会自动为你生成 action creator 和 action type，你只需要定义 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

处理异步逻辑

createAsyncThunk 函数可以帮助你处理异步逻辑。它接收一个 action type 和一个返回 Promise 的函数，然后生成一个 thunk，这个 thunk 会 dispatch pending、fulfilled 和 rejected 三种 action。

import { createAsyncThunk } from '@reduxjs/toolkit'


export const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

以上就是 @reduxjs/toolkit 的一些基本用法。你可以根据你的应用的需要，使用 @reduxjs/toolkit 提供的其他功能。