Поведение Redux Reducer при вызове нескольких действий в компоненте - PullRequest
Новая
       8

Поведение Redux Reducer при вызове нескольких действий в компоненте

0 голосов
/ 26 мая 2020

Я недавно изучил стек MERN и в настоящее время создаю побочный проект, использующий его. Я сталкиваюсь с проблемой, в которой мои Redux Reducer перекрывают друг друга каждый раз, когда вызывается другое действие. Вот полная и подробная проблема.

Вопросы:

  1. Поведение при вызове действий в компоненте React. Допустим, мы решили создать действие и реализовать его в одном из наших компонентов React, мы выполнили всю настройку (например, создали редуктор и обновили состояние, создали само действие и подключили его к компоненту реакции, используя connect от react-redux). Мне было просто интересно, когда я вызываю несколько действий в нашем компоненте React из componentDidMount, почему состояния перекрывают друг друга. Например, 
componentDidMount(){
  // Action updates 'user: {}' state in our reducer
  this.props.fetchUserData();
  // Action updates 'clients:{}' state 
  this.props.fetchClientsData();
}

Результирующее состояние от редукторов: 

user: {}, // Overrided by the fetchClientsData()
clients { clientsData }

Разве мы не обновляем по существу указанное c состояние редуктора (fetchUserData () обновляет 'user: {} 'и fetchClientsData () обновляет' клиентов: {} '). ПОЧЕМУ ЭТО ЗАПРЕЩЕНО? Я проверил свое промежуточное программное обеспечение Redux Devtools, и оно фактически переопределяет. КАК Я НЕ ЗАПРЕЩАЮСЬ ДРУГОЕ СОСТОЯНИЕ В РЕДУКТОРЕ? Спасибо!

Обновление: - Вот мои редукторы: Index. js

import { combineReducers } from "redux";
import AuthReducer from "./AuthReducer";
import NotificationReducer from "./NotificationReducer";
import { reducer as formReducer } from "redux-form";
import DataReducer from "./DataReducer";

export default combineReducers({
    form: formReducer,
    auth: AuthReducer,
    notification: NotificationReducer,
    data: DataReducer,
});

AuthReducer. js 

import { FETCH_USER, FETCH_HOSPITAL } from "../actionTypes";

export default (state = null, action) => {
    switch (action.type) {
        case FETCH_USER:
            return action.payload || false;
        case FETCH_HOSPITAL:
            return action.payload || false;
        default:
            return false;
    }
};

DataReducer. js 

import { FETCH_DATA } from "../actionTypes";

export default (state = {}, action) => {
    switch (action.type) {
        case FETCH_DATA:
            return { ...state, data: action.payload };
        default:
            return state;
    }
};

1 Ответ

0 голосов
/ 26 мая 2020

Ошибка заключается в вашем AuthReducer, все, что вы возвращаете из этого switch case оператора, становится вашим новым состоянием.

Так же, как вы делаете в своем DataReducer.js файле

Поэтому вам нужно обновить свое состояние, например: 

export default (state = null, action) => {
  switch (action.type) {
      case FETCH_USER:
          return {...state, users: action.payload || false};
      case FETCH_HOSPITAL:
          return {...state, clients: action.payload || false};
      default:
          return state;
  }
};

Также было бы хорошо, если бы вы инициализировали свое состояние

...