[英]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.