Redux 升级到 4.0：使用 createSlice 和 Redux Toolkit

在前端开发中，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。示例代码如下：

import { createSlice } from '@reduxjs/toolkit'

// 定义 initial state
const initialState = { value: 0 }

// 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: state => {
      state.value++
    },
    decrement: state => {
      state.value--
    },
  },
})

// 导出 reducer 和 action
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

在上面的代码中，我们使用 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 中即可。示例代码如下：

import { createSlice } from '@reduxjs/toolkit'

// 定义 initial state
const initialState = { value: 0 }

// 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: state => {
      state.value++
    },
    decrement: state => {
      state.value--
    },
  },
})

// 导出 reducer 和 action
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

接着，在 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。示例代码如下：

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './reducers/counter'

function App() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  )
}

export default App

总结

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