试图将 action.payload 从一个切片传递到另一个不同的切片

Question

我想要实现的是将动作有效负载从一个切片发送到另一个切片，我已经被困了几个小时。

我已经尝试访问全局商店，但问题是我这样做时遇到错误

我正在使用 redux-tool-kit 来管理我的 React 应用程序的状态，并且我正在尝试将负载从一个切片传递到另一个切片，以下是我的第一个切片：

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
}

本节仍为第一片

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

这是第二个切片是下面的代码




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

如果您对如何排序有任何想法，请提供帮助。

干杯。

Answer 1

只需将 getLoginUser.rejected 的 extraReducer 添加到第二个切片。您可以根据需要将其添加到 extraReducers 个切片中。

顺便说一句，你真的不应该是extraReducers的地图对象符号，而是extraReducers "builder callback" notation。您正在使用的对象表示法即将被弃用，我们长期以来一直在文档中反对它。

试图将 action.payload 从一个切片传递到另一个不同的切片

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

reactjs

redux-thunk

react-redux

react-thunk

redux-toolkit