Trying to pass action.payload from one slice to another different slice

Question

What I am trying to achieve is sending action payload from one slice to another and I have been stuck several hours trying to do so.

I have tried accessing the global store but the problem is I am getting errors on doing so

I am using redux-tool-kit to manage the state of my react application and I am trying to pass a payload from one slice to another, the following is my first slice:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from 'axios';
import { clearAlert, displayIncorrectEmail } from "./features.js/Alert";

const initialState = {
    user: user ? JSON.parse(user) : null,
    isMember: false,
    isLoading: true
}

This section still for the first slice

export const getRegisteredUser = createAsyncThunk('auth/getRegistrationRes', async (currentUser, thunkAPI) => {
    try {
        const response = await axios.post('/api/v1/auth/register', currentUser)
        return response.data
    } catch (error) {
        // console.log(error.message)
        thunkAPI.rejectWithValue(error.message)
    }
})
export const getLoginUser = createAsyncThunk('auth/getLoginRes', async (currentUser, thunkAPI) => {
    try {
        const response = await axios.post('/api/v1/auth/login', currentUser)
        thunkAPI.dispatch(displaySuccess())
        setTimeout(() => {
            thunkAPI.dispatch(clearAlert())
        }, 3000);
        return response.data
    } catch (error) {
        thunkAPI.dispatch(displayIncorrectEmail())
        // console.log(error.response.data.msg);
        thunkAPI.rejectWithValue(error.message)


//the below return is the action-payload I want to pass to another slice
        return error.response.data.message
//
    }
})

const authenticationSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
    },
    extraReducers: {
        // login user reducers
        [getLoginUser.pending]: (state) => {
            state.isLoading = true;
        },
        [getLoginUser.fulfilled]: (state, action) => {
            state.isLoading = false;
            // console.log(action.payload.getState());
            // action.payload.load = true
            state.user = action.payload.user
        },
        [getLoginUser.rejected]: (state) => {
            state.isLoading = false;
            state.user = null
        },
    }
})
export const { registerUser, loginUser } = authenticationSlice.actions

export default authenticationSlice.reducer

This is the second slice is the code below




import { createSlice } from "@reduxjs/toolkit";
const initialState = {
    showAlert: false,
    alertText: '',
    alertType: '',
}
const alertSlice = createSlice({
    name: 'alert',
    initialState,
    reducers: {
        displayIncorrectEmail: (state, action) => {
            state.showAlert = !state.showAlert
//I want to pass the action.payload to this instead of hard-coding it to 'incorrect email' //below
            state.alertText = 'incorrect email'
//the state.alertText above
            state.alertType = "danger"
        },
        clearAlert: (state) => {
            // setTimeout(() => {
            state.showAlert = !state.showAlert;
            // }, 4000);
        }
    }
})

export const { displayDanger, clearAlert, displaySuccess, displayIncorrectEmail } = alertSlice.actions

export default alertSlice.reducer

Kindly help if you have an idea on how to sort this.

cheers.

score 1 · Accepted Answer · answered May 19 '22 at 11:58

1

Just add an extraReducer for getLoginUser.rejected to the second slice as well. You can add that to the extraReducers of as many slices as you want to.

By the way, you really should not be the map object notation of extraReducers, but the extraReducers "builder callback" notation. The object notation you are using is soon going to be deprecated and we have been recommending against it in the docs for a long time.

answered May 19 '22 at 11:58

phry

35,762
5
67
81

i still use object notation in my redux toolkit project. Do you recommend change it to builder callback? just need change it adding the builder function and add.case in every placer where now is [function.fullfiled].....? thanks – ddaudiosolutions Feb 11 '23 at 08:59
@ddaudiosolutions Yes, it will be removed in the next version. – phry Feb 11 '23 at 10:56
Ah, ok. But if i don't update to next version, still can i use?....thanks – ddaudiosolutions Feb 11 '23 at 16:09
@ddaudiosolutions Yes, but we have been recommending against that in the docs for multiple years by now, as it is not possible to give good TypeScript support for the object builder notation. There is no benefit of keeping it. – phry Feb 11 '23 at 21:58
Thanks for your comments. I will start to change my slices to builder callback notation. – ddaudiosolutions Feb 12 '23 at 07:47

Trying to pass action.payload from one slice to another different slice

1 Answers1