尝试通过Action.pay Load从一个切片到另一片不同的切片

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的furedareducer添加到第二个切片中即可。您可以将其添加到尽可能多的切片的extrareducer。

顺便说一句，您真的不应该是extruesducers的地图对象表示法，而是 extrareducers“ builder” builder回调符号。您正在使用的对象符号很快将被弃用，并且我们在文档中一直在建议它很长一段时间。