Блог

Я использую React с Redux и столкнулся с ситуацией, когда я хочу, чтобы один из моих редукторов отправил другое действие, но не уверен, как это сделать.

Созданный с помощью createSlice функции, у меня есть фрагмент для аутентификации и один для модалов. Я хотел бы вызвать hideModal действие из login редуктора моего фрагмента аутентификации, чтобы полностью скрыть модальный вход после отправки.

Причина, по которой я не могу просто вызвать dispatch(login()) сразу после dispatch(hideModal()) этого, заключается в том, что мне нужно сначала выяснить, есть ли какие-либо ошибки в данных формы, которые могут быть известны только внутри [login.fulfilled] редуктора, как login и асинхронный блок, созданный с использованием createAsyncThunk .

Я понимаю, что это своего рода анти-шаблон в React, поэтому было интересно, каков наилучший способ добиться этого?

Единственное решение, которое у меня есть modalSlice до сих пор, — это прослушивание login.fulfilled как часть его extraReducers объекта. Но это довольно грязно.

Любая помощь будет оценена, дайте мне знать, если этот вопрос недостаточно ясен, я постараюсь уточнить. Спасибо

Фрагмент аутентификации

 export const authSlice = createSlice({
    name: "auth",
    initialState: {
        loggedIn: false,
        userId: null,
        errors: []
    },
    extraReducers: {
        [login.fulfilled]: (state, action) => {
            if (action.payload.success) {
                state.loggedIn = true;
                state.userId = action.payload.userId;
                state.errors = [];
            } else {
                state.errors = action.payload.errors;
            }
        },
// Omitting rest of slice

  

Модальный фрагмент

 export const modalSlice = createSlice({
    name: "modal",
    initialState: {
        current: ""
    },
    reducers: {
        hideModal: (state) => {
            state.current = "";
        },
        showModal: (state, action) => {
            state.current = action.payload;
        }
    },

    // Possible solution: Works but quite messy 
    // and copies code from above rather than calling hideModal
    extraReducers: {
        [login.fulfilled]: (state, action) => {
            if (action.payload.success) {
                state.current = "";
            }
        },
// Omitting rest of slice
  

Причина, по которой я не могу просто вызвать dispatch(login()), за которым сразу следует dispatch(hideModal()), заключается в том, что мне нужно сначала выяснить, есть ли какие-либо ошибки в данных формы, которые могут быть известны только внутри редуктора входа.

Разве вы не можете выполнить проверку на наличие ошибок перед следующей отправкой? У вас есть доступ к хранилищу redux внутри вашего компонента

 dispatch(authLogin);
if (this.state.auth.errors) { // or however you are connecting to your store
  // do error handling stuff
} else {
 dispatch(closeModal);
}