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.

Answer 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.