redux教程，一个store如何按功能划分多个slice切片？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在create-react-app的redux模版中，定义了一个store，然后定义了一个createSlice。在slice的结构体里面，有state的机构和改变的方法。在store中，有这个state结构体的名字。故事就是从这里开始的。

大家好，这里是苏南大叔的程序如此灵动博客。这里讲述redux-react项目中，一个store对应多个slice的方式。测试环境：win10，node@16.14.2，create-react-app@5.0.1，reduxjs/toolkit@1.8.3，react-redux@8.0.2，chrome@103.0.5060.53，redux-devtools-extension@3.0.11。

前情回顾

首先，最基础的redux/toolkit里面的slice相关定义。参考文章：

• https://newsn.net/say/redux-toolkit.html

其次，create-react-app的redux模版里面的定义方式。参考文章：

• https://newsn.net/say/redux-slice.html

slice.js：

import { createSlice} from '@reduxjs/toolkit';
export const wife = createSlice({
  name: 'wife',
  initialState :{
    has: [],
  },
  reducers: {
    need : (state, action) => {
      state.has.push(action.payload);
    }
  },
});
export const reducer_1 = wife.reducer;
export const { need } = wife.actions;

store.js：

import { configureStore } from '@reduxjs/toolkit';
import { reducer_1 } from './slice';
export const store = configureStore({
  reducer: {
    female: reducer_1,
  },
});

定义多个createSlice

对于不同功能的函数，使用slice进行分区，就可以划分不同的功能区了。比如：
在定义一个slice-2.js:

import { createSlice} from '@reduxjs/toolkit';
export const husband = createSlice({
  name: 'husband',
  initialState :{
    have: [],
  },
  reducers: {
    need2 : (state, action) => {
      state.have.push(action.payload);
    }
  },
});
export const reducer_2 = husband.reducer;
export const { need2 } = husband.actions;

修改store.js：

import { configureStore } from '@reduxjs/toolkit';
import { reducer_1 } from './slice';
import { reducer_2 } from './slice2';
export const store = configureStore({
  reducer: {
    female: reducer_1,
    male: reducer_2,
  },
});

调用方法一：普通方法

调用不同的功能的时候，也是一样的方法。

import store from "./store.js";
import { need } from './slice.js';
import { need2 } from './slice2.js';
store.subscribe(() => console.log(store.getState()))
store.dispatch(need("土豆"));
store.dispatch(need2("球鞋"));

不过基于redux/toolkit的代码，在运行的时候，都比较特殊。需要使用webpack类的代码，进行一下包装才能使用。参考文章：

• https://newsn.net/say/redux-toolkit.html

调用方法二：react中调用

还是create-react-app的redux模版例子，counter.js:

import { useDispatch } from 'react-redux';
import { need } from './../logic/slice';
import { need2 } from './../logic/slice2';
export function Counter() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(need("唇膏"))}>
        买唇膏
      </button>
      <button onClick={() => dispatch(need2("香烟"))}>
        买香烟
      </button>
    </div>
  );
}

结果截图

调用的结果，在redux-devtools里面看state的话，就可以看到，两个不同的slice里面的state结果，显示在了一起。

相关文章

• https://newsn.net/say/redux-toolkit.html
• https://newsn.net/say/redux-slice.html

综述

更多redux文章，请点击苏南大叔的博客。

• https://newsn.net/tag/redux/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。