在前端开发中，Redux 是最常用的状态管理库之一。那么，在 Redux 4.0 中新增的 createSlice 和 Redux Toolkit 到底是什么，有什么作用呢？
createSlice 是什么？
createSlice 是 Redux 4.0 中新增的函数，用于创建 Redux store 中的 slice（切片）。slice 可以理解为一个小的 Redux store 子树，包含了相关的 reducer、action 和 selector。
createSlice 函数接收一个配置对象，包含了 name、initialState、reducers 等字段，用于生成一个包含了 reducer、action 和 selector 的 slice。示例代码如下：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------ -- -- ------- ----- ----- ------------ - - ------ - - -- -- ----- ----- ------------ - ------------- ----- ---------- ------------- --------- - ---------- ----- -- - ------------- -- ---------- ----- -- - ------------- -- -- -- -- -- ------- - ------ ------ ----- - ---------- --------- - - -------------------- ------ ------- --------------------展开代码
在上面的代码中，我们使用 createSlice 创建了一个名为 counter 的 slice，包含了 increment 和 decrement 两个 reducer，以及 increment 和 decrement 两个 action。
Redux Toolkit 是什么？
与 createSlice 一起推出的 Redux Toolkit 是一个包含了 Redux 相关工具函数的库，可以帮助我们更好地使用 Redux，提高开发效率。
Redux Toolkit 目前包含了以下几个函数：
createSlice：用于创建slice。createAction：用于创建一个 action。createAsyncThunk：用于创建处理异步操作的 thunk action。configureStore：用于快速创建一个 Redux store，并自动集成常用的 Redux 中间件。createReducer：用于将多个 reducer 合成一个 reducer。createSelector：用于创建 selector。
除了 createSlice，其他函数也是十分有用的，可以根据需求进行选择使用。
如何使用 createSlice 和 Redux Toolkit？
首先，安装 @reduxjs/toolkit：
npm i @reduxjs/toolkit -S
然后，在使用 createSlice 的组件中，将 slice.reducer 和 slice.actions 添加到 Redux store 中即可。示例代码如下：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------ -- -- ------- ----- ----- ------------ - - ------ - - -- -- ----- ----- ------------ - ------------- ----- ---------- ------------- --------- - ---------- ----- -- - ------------- -- ---------- ----- -- - ------------- -- -- -- -- -- ------- - ------ ------ ----- - ---------- --------- - - -------------------- ------ ------- --------------------展开代码
接着，在 configureStore 函数中，传入 reducer 即可创建一个包含了常用 Redux 中间件的 Redux store：
import { configureStore } from '@reduxjs/toolkit' import counterReducer from './reducers/counter' export default configureStore({ reducer: { counter: counterReducer, }, })
最后，在组件中使用 useSelector 和 useDispatch 即可获取 state 和 dispatch。示例代码如下：
-- -------------------- ---- ------- ------ - ------------ ----------- - ---- ------------- ------ - ---------- --------- - ---- -------------------- -------- ----- - ----- ----- - ----------------- -- -------------------- ----- -------- - ------------- ------ - ----- ---------------- ------- ----------- -- --------------------------------- ------- ----------- -- --------------------------------- ------ - - ------ ------- ---展开代码
总结
createSlice 和 Redux Toolkit 是 Redux 4.0 中新增的工具函数，可以帮助我们更好地使用 Redux，并提高开发效率。通过 createSlice 函数，我们可以轻易地创建一个包含了 reducer、action 和 selector 的 slice。而 Redux Toolkit 则提供了一系列常用的 Redux 工具函数，可以根据需求进行选择使用，如 createAsyncThunk、createSelector 等。最后，通过 useSelector 和 useDispatch，我们可以轻松地在组件中使用 Redux store。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65955f8eeb4cecbf2d98b0d6
