时间戳

首页 > 解决方案 > 在组件内调用多个操作时 Redux Reducer 的行为

reactjs - 在组件内调用多个操作时 Redux Reducer 的行为

问题描述

我最近学习了 MERN 堆栈，目前正在使用它制作一个附带项目。我遇到了一个问题，每次调用不同的操作时，我的 Redux Reducer 都会相互覆盖。这是完整而详细的问题。

问题：

  1. 在 React 组件上调用操作的行为。假设我们决定创建一个动作并在我们的一个 React 组件中实现它，我们已经完成了所有设置（例如创建 reducer 并更新状态，创建动作本身并使用connectfrom将其连接到反应组件react-redux） . 我只是想知道当我在我们的 React 组件中调用多个操作时componentDidMount，为什么状态会相互覆盖。例如
componentDidMount(){
  // Action updates 'user: {}' state in our reducer
  this.props.fetchUserData();
  // Action updates 'clients:{}' state 
  this.props.fetchClientsData();
}

Reducers 的结果状态：

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

我们不是在本质上更新特定的 reducer 状态吗（fetchUserData() 更新 'user:{}' 和 fetchClientsData() 更新'clients: {}'）。为什么它是压倒一切的？我检查了我的 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;
    }
};

标签： reactjsreduxreact-redux

解决方案

错误在于您的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;
  }
};

如果您初始化您的状态，那将是一件好事

推荐阅读