如何在两个 slice reducer redux 工具包之间共享数据答案

【问题标题】：How to share data between two slice reducers redux toolkit如何在两个 slice reducer redux 工具包之间共享数据
【发布时间】：2021-06-06 11:02:07
【问题描述】：

我有两个切片减速器，我想将一个的状态传递给另一个。在 redux 的旧方式中，我会这样做：

import store from "store"

///reducer code

const state = store.getState();

现在我正在使用 redux-toolkit，这种导入商店的方式不起作用。

这里是登录切片：


import { createSlice } from '@reduxjs/toolkit';
import axios from "axios"
import Swal from 'sweetalert2'

export const initialState = {
        id: "1111"
}
export const LoginSlice = createSlice({
  name: 'login',
  initialState,
  reducers: {
    login: state => {
       state.id = "2222"
    },
},
});


export const { login} = LoginSlice.actions;

这是网站切片：

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


export const SitesSlice = createSlice({
  name: 'sites',
  initialState: {
    sites: []
  },
  reducers: {
    GetSites: (state,action) => {

        axios.post(process.env.REACT_APP_API_URL+"/sites/get",{id: get id here}).then((err,data) =>{
          if(data.data.success){
            state.sites = data.data.data
          }else{
            error
          }
      })
      .catch(error => {
         error
      })
  }
},
});


export const { GetSites } = SitesSlice.actions;

这里是商店：


import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux'
import loginReducer from '../features/Login/loginSlice';
import siteReducer from '../features/Sites/SitesSlice';

const reducer = combineReducers({
  login: loginReducer,
    sites: siteReducer,
})

export default configureStore({
  reducer
});

我想要做的是从登录切片获取用户 ID 到站点切片。类似store.getState().logIn.user.id

我遇到了这个问题）；

【问题讨论】：

标签： javascript reactjs redux redux-toolkit

【解决方案1】：

configureStore() 函数返回相同的存储对象，您可以像这样简单地获取它：

const store = configureStore({
  reducer
})

然后像往常一样使用它。

store.getState()

您可能还想导出商店。

export default store;

【讨论】：

【解决方案2】：

你不应该在减速器中做任何副作用——这包括访问像 state 这样的外部变量（正如 Muhammad Yaqoob 在他的回答中所建议的那样）以及像你在那里尝试那样执行 axios.post。（另外，这不仅是不应该做的事情——它也永远不会起作用）

这应该在中间件中完成，或者只是在一个 thunk 中完成。由于这是一个全新的蠕虫罐，远远超出了这个问题的范围，请参阅关于这个主题的官方 redux 教程：https://redux.js.org/tutorials/essentials/part-5-async-logic （如果您遵循此路径，您会注意到您可以从中间件、thunk 和 createAsyncThunk 中访问当前状态值，这也应该回答您的问题）

【讨论】：