CODEWITHSUNDEEP
javascriptreactjsreduxredux-toolkit
Daniel
Daniel

Reputation: 95

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. In the old way of redux I would do it like that:

import store from "store"

///reducer code

const state = store.getState();

Now Iam using redux-toolkit and this way of importing store doesnt work.

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. something like store.getState().logIn.user.id

I am having trouble with this );

Upvotes: 1

Views: 5030

Answers (2)

phry
phry

Reputation: 44078

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. (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. 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)

Upvotes: 3

Muhammad Yaqoob
Muhammad Yaqoob

Reputation: 94

The configureStore() function returns the same store object which you can simply get like this:

const store = configureStore({
  reducer
})

And then use it, like you normally would.

store.getState()

You might want to export store also.

export default store;

Upvotes: 0

Related Questions