繁体   English   中英

redux减速器的副作用,减速器返回值的形式不同于初始状态

[英]redux reducer side-effects, reducer return value has a form that is different from the initial state

我遇到了一个有趣的问题。
用例是这样的:

渲染个人资料(无论是地点/用户个人资料)时,我想从服务器中检索一些信息。
减速器看起来像这样:

import {
    FETCH_PLACE_SUCCESS,
} from './GetPlaceActions';

const initialState = {};

/**
 * This reducer keeps track of all places that have previously been retrieved
 * If the store contains a place that has already been added, it will return it
 * @param previousState
 * @param type
 * @param payload
 * @returns {*}
 * @constructor
 */
const GetPlaceReducer = (previousState = initialState, { type, payload }) => {

    let place = null;

    switch (type) {
      case FETCH_PLACE_SUCCESS:
          place = payload.place;
          previousState[place.placeId] = place;
          return { ...place };

      default:
          if (payload && payload.placeId) {
            place = { ...previousState[payload.placeId] }
          }
          return { ...place };
    }
};

这里的想法是跟踪以前获取的配置文件。
我认为reducer不应包含有关“当前”位置的信息,因为当前状态可以引用错误的(先前的配置文件),并且应该将它们隔离开来,因为很容易出错。
使用SSR时,此状态对象很可能在到达客户端时已经在存储中包含一个配置文件,因此,我无需再次重新获取它。

我用这种方法遇到的问题是,这不是一个纯函数,并且返回的状态没有初始状态的相同形式(初始状态是一个集合,而reducer返回单个位置)。

我在这里有效执行的操作是更新“地点对象”,这是一个副作用,并且我只返回一个地点(我需要在组件中输入)。
尽管我认为这会起作用,但我不认为这是最好的方法。

您如何改善现有设计?

给定的示例无法按预期工作,因为switch语句中的返回值将始终更新当前状态。
因此,以与初始状态不同的格式返回值不是一个好习惯,因为它导致不一致的状态。

对于我的用例,解决方案非常简单。
由于当前显示的配置文件包含需要实时信息的信息(即,有多少观察者用于该配置文件),因此我需要在每个页面视图上再次请求数据。

我将状态与一个配置文件与另一个配置文件隔离的方法是,在FETCH_PLACE_REQUEST上返回一个空对象。 这样可以确保在请求新配置文件时始终清空该状态。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM