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

Try changing this line in the load_cube function:

self.cube_original = np.load(path)

to this:

self.cube_original = np.load(path, allow_pickle=True)