Redux Toolkit 是一个官方推荐的 Redux 工具集，它提供了一些实用的工具函数，可以让我们更加便捷地编写 Redux 应用。本文将从入门到精通，详细介绍 Redux Toolkit 的使用和优势。
入门
首先，我们需要安装 Redux Toolkit：
npm install @reduxjs/toolkit
然后，在 Redux 应用中，使用 configureStore 函数创建 store：
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
// reducers
},
});这里的 configureStore 函数会自动集成一些常用的 Redux 中间件，如 Redux Thunk 和 Redux DevTools Extension。
接着，我们可以使用 createSlice 函数定义一个 reducer 和 action：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------------- -
------ ----- - --
--
---------------- -
------ ----- - --
--
--
---
------ ----- - ---------- --------- - - ---------------------
------ ------- ---------------------这里的 createSlice 函数会自动创建一个 reducer，并生成对应的 action。我们可以直接使用 increment 和 decrement action，而不需要手动定义。
最后，我们在组件中使用 useSelector 和 useDispatch hooks 获取 store 中的 state 和 dispatch：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- --------- - ---- -----------------
-------- --------- -
----- ----- - ------------------- -- ---------------
----- -------- - --------------
------ -
-----
------- ----------- -- ---------------------------------
--------------------
------- ----------- -- ---------------------------------
------
--
-这里的 useSelector 和 useDispatch hooks 可以让我们更加方便地使用 Redux。
进阶
Redux Toolkit 提供了很多实用的工具函数，可以让我们更加便捷地编写 Redux 应用。下面介绍一些常用的工具函数。
createAsyncThunk
createAsyncThunk 函数可以自动创建一个异步 action，它包含了三个状态：pending、fulfilled 和 rejected。我们只需要传入一个异步函数，即可自动生成对应的 action。
import { createAsyncThunk } from '@reduxjs/toolkit';
export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
const response = await fetch(`/api/users/${userId}`);
const user = await response.json();
return user;
});这里的 fetchUser action 可以自动处理异步请求，并在请求成功或失败时触发对应的状态。
createEntityAdapter
createEntityAdapter 函数可以自动创建一个用于管理实体的 adapter。它可以自动处理实体的 CRUD 操作，并生成对应的 reducer 和 action。
-- -------------------- ---- ------- ------ - ------------------- - ---- ------------------- ----- ------------ - ---------------------- ----- ---------- - ------------- ----- -------- ------------- ------------------------------- --------- --- --- ------ ----- - ---------- --------------- ----------- -------------- - - --------------------------------- -- ------------- ------ ------- -------------------
这里的 usersAdapter 可以自动处理用户实体的 CRUD 操作，并生成对应的 reducer 和 action。我们可以使用 selectAllUsers 和 selectUserById selectors 获取用户列表和指定用户信息。
createSlice
createSlice 函数可以自动创建一个 reducer 和 action。我们只需要传入一个初始状态和一些 reducer 函数，即可自动生成对应的 reducer 和 action。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------------- -
------ ----- - --
--
---------------- -
------ ----- - --
--
--
---
------ ----- - ---------- --------- - - ---------------------
------ ------- ---------------------这里的 counterSlice 可以自动生成对应的 reducer 和 action。我们可以直接使用 increment 和 decrement action，而不需要手动定义。
总结
Redux Toolkit 是一个实用的 Redux 工具集，它提供了很多实用的工具函数，可以让我们更加便捷地编写 Redux 应用。通过本文的介绍，我们可以更加深入地了解 Redux Toolkit 的使用和优势。希望这篇文章能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e01a1e1886fbafa4d529a2