我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:redux教程,一个store如何按功能划分多个slice切片? - 多个slice
redux教程,一个store如何按功能划分多个slice切片?(图6-1)

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

前情回顾

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

其次,create-react-appredux模版里面的定义方式。参考文章:

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;

苏南大叔:redux教程,一个store如何按功能划分多个slice切片? - 代码1
redux教程,一个store如何按功能划分多个slice切片?(图6-2)

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;

苏南大叔:redux教程,一个store如何按功能划分多个slice切片? - 代码2
redux教程,一个store如何按功能划分多个slice切片?(图6-3)

修改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,
  },
});

苏南大叔:redux教程,一个store如何按功能划分多个slice切片? - 代码3
redux教程,一个store如何按功能划分多个slice切片?(图6-4)

调用方法一:普通方法

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

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类的代码,进行一下包装才能使用。参考文章:

调用方法二:react中调用

还是create-react-appredux模版例子,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教程,一个store如何按功能划分多个slice切片? - 合并调用
redux教程,一个store如何按功能划分多个slice切片?(图6-5)

结果截图

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

苏南大叔:redux教程,一个store如何按功能划分多个slice切片? - redux截图
redux教程,一个store如何按功能划分多个slice切片?(图6-6)

相关文章

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    redux