如何使用Redux工具包开始！-DEV365 开发者社区

Redux Toolkit是一个流行的库，用于简化Redux应用程序的开发。它提供了一组实用程序，可帮助您更快地编写Redux逻辑，并使用更少的样板代码编写。在此博客文章中，我们将仔细研究Redux Toolkit的开始步骤。

步骤1：安装Redux Toolkit
Redux工具包开始的第一步是安装它。您可以通过在终端中运行以下命令来执行此操作：

npm install @reduxjs/toolkit react-redux

或，如果您喜欢使用纱线：

yarn add @reduxjs/toolkit react-redux

步骤2：用redux工具包定义还原
Redux工具包的主要功能之一是CreatesLice函数。此功能允许您在单个文件中定义redux还原及其动作。这是一个例子：

./Reducer.js
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

在上面的代码中，我们定义了一个包含我们还原器名称的iNTERSLICE对象，其初始状态值以及定义如何更新状态的一组还原器。 CreateSlice函数会自动为每个还原器生成动作创建者，我们将其导出并在组件中使用。

步骤3：使用Redux Toolkit创建Redux Store
安装了Redux工具包后，您可以使用Configurestore函数创建Redux Store。此函数将对象作为参数，您可以在其中定义Redux Store配置。

要将Redux Toolkit与React一起使用，您需要将应用程序与提供的Redux Store提供给您的组件的提供商组件。

./index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import App from './App'
import reducer from './Reducer'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  middleware: [],
  devTools: process.env.NODE_ENV !== 'production',
})
root.render(
  <StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </StrictMode>
);

在上面的代码中，我们正在创建一个Redux Store，其还原器在上一步中定义并将其传递给提供商组件，该提供商组件正在包装我们的应用程序组件。我们还有一个空数阵列，用于中间件，用于在开发模式下启用Redux DevTools扩展的标志。

步骤4：使用redux状态和组件中的动作

./App.js
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

在上面的代码中，我们正在导入React-Redux的UsedisPatch和UseElector挂钩，以及我们的counterslice降低器的增量和减少操作。

接下来，您可以使用useselector挂钩访问redux状态的当前值。例如，如果您的计数器值存储在柜台下的Redux商店中，则可以这样访问它：

在下面的代码中，我们将从Redux商店呈现反价，并添加单击时派遣增量和减少操作的按钮。

./App.js
 import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

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

  const handleIncrement = () => {   
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  return (
    <div>
      <h2>Counter: {counterValue}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  )
}
export default App

就是这样！使用Redux Toolkit，您可以轻松地使用带有较少样板代码的React组件中的Redux状态和操作。

在此处查看Codepen => https://codesandbox.io/s/reduxtoolkit-3c5xro