react18 中使用@reduxjs/toolkit

1.安装依赖包

yarn add @reduxjs/toolkit react-redux

2.创建 store

根目录下面创建 store 文件夹，然后创建 index.js 文件。

import {
    configureStore } from "@reduxjs/toolkit";
import {
    counterReducer } from "./features/counter";
import counterReducers from "./modules/counterStore";
import channelReducers from "./modules/channelStore";

export const store = configureStore({
   
  reducer: {
   
    counterReducers,
    channelReducers,
  },
  middleware: (getDefaultMiddleware) => {
   
    const middlewares = getDefaultMiddleware();
    return [...middlewares /* ... */];
  },
});

export default store;

3.创建模块

在 store 文件夹下面创建 modules 文件夹，然后创建 counterStore.js 和 channelStore.js 文件。

import {
    createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
   
  name: "counter",
  initialState: {
   
    count: 10,
  },
  reducers: {
   
    increase(state) {
   
      state.count += 1;
    },
    decrease(state) {
   
      state.count -= 1;
    },