redux 的 toolkit使用教程和demo

React 的 redux-toolkit 是一个简化 Redux 开发的工具包，它提供了一系列的简化方法来处理常见的 Redux 模式。下面我将指导你如何使用 redux-toolkit 创建一个简单的计数器应用。

第一步：安装依赖

首先你需要确保你的项目中已经安装了 react, react-dom, @reduxjs/toolkit, 和 react-redux。你可以通过以下命令来安装它们（如果你还没有创建项目的话，可以先用 create-react-app 快速创建一个项目）:

npx create-react-app my-app
cd my-app
npm install @reduxjs/toolkit react-redux

第二步：创建计数器 Slice

接下来我们需要创建一个计数器功能的 slice。在 src 文件夹下创建一个名为 features/counter/counterSlice.js 的文件，并输入以下代码：

import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

这个 slice 定义了一个计数器的状态，并提供了三个不同的 actions 来修改计数器的值。

第三步：设置 store

在 src 目录下创建或编辑 store.js 文件，配置 Redux store 并引入刚刚创建的 counterSlice:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

第四步：设置 Provider

确保在应用程序的根组件中包装 <Provider> 组件以使 React 组件能够访问 Redux store。编辑 src/index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

第五步：创建计数器组件

现在我们需要创建一个 React 组件来展示计数器并允许用户增加或减少计数值。编辑 src/App.js 文件：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './features/counter/counterSlice';

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <input type="number" id="custom-inc" value={0} onChange={(e) => setCustomIncrement(e.target.value)} />
      <button onClick={() => dispatch(incrementByAmount(customIncrement))}>Custom Increment</button>
    </div>
  );
}

// 追加状态管理逻辑
let customIncrement = 0;
const setCustomIncrement = (value) => {
  customIncrement = parseInt(value, 10);
};

export default App;

第六步：运行应用

保存所有更改后，返回到终端并运行你的应用：

npm start

现在你应该能看到一个简单的计数器应用运行在本地服务器上，可以通过点击按钮来增加或减少计数器的值。这只是一个基本示例，实际应用中你可能会有更复杂的 state 和更丰富的 UI。希望这个示例对你有所帮助！