[英]How to share data between two slice reducers redux toolkit
I have two slice reducers and I want to get the state of one to the other.我有两个切片减速器,我想得到一个到另一个的 state。 In the old way of redux I would do it like that:在 redux 的旧方式中,我会这样做:
import store from "store"
///reducer code
const state = store.getState();
Now Iam using redux-toolkit and this way of importing store doesnt work.现在我正在使用 redux-toolkit,这种导入商店的方式不起作用。
here is LoginSlice:这是登录切片:
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;
here is Sites slice:这是站点切片:
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;
here is the store:这是商店:
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
});
what I want to do is to get the user id from the logIn Slice to the Sites Slice.我想要做的是从登录切片获取用户 ID 到站点切片。 something like store.getState().logIn.user.id
类似store.getState().logIn.user.id
I am having trouble with this );我遇到了麻烦);
You should never do any side effect within a reducer - this includes both accessing an external variable like state
(as suggested by Muhammad Yaqoob in his answer) as well as executing a axios.post
like you are trying there.你不应该在减速器中做任何副作用 - 这包括访问像state
这样的外部变量(正如 Muhammad Yaqoob 在他的回答中所建议的那样)以及像你在那里尝试一样执行axios.post
。 (Also, that is not only something that should not be done - it will also never work) (此外,这不仅是不应该做的事情 - 它也永远不会起作用)
This should be done in a middleware or just in a thunk.这应该在中间件中完成,或者只是在一个 thunk 中完成。 Since that is a whole new can of worms that goes well beyond the scope of this question, please see the official redux tutorial on this topic: https://redux.js.org/tutorials/essentials/part-5-async-logic (If you follow this path you will notice that you can access current state values from within middleware, thunks and createAsyncThunk
, which should then also answer your question)由于这是一个全新的蠕虫罐头,远远超出了本问题的 scope,请参阅有关此主题的官方 redux 教程: https/essential/ssync.js. (如果您遵循此路径,您会注意到您可以从中间件、thunk 和createAsyncThunk
中访问当前 state 值,这也应该回答您的问题)
The configureStore() function returns the same store object which you can simply get like this: configureStore() function 返回相同的存储 object ,您可以像这样简单地得到:
const store = configureStore({
reducer
})
And then use it, like you normally would.然后像往常一样使用它。
store.getState()
You might want to export store also.您可能还想导出商店。
export default store;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.