向redux-reducer添加逻辑以保持状态



我正在处理一个react/redux学习项目,在该项目中,我正在构建用于托管无头CMS内容的组件。应用程序的一部分是下拉列表,它将从源CMS中的所有可用内容频道中选择内容。

这在第一次通过时有效,但当我导航到另一个页面(即单个CMS内容项的详细信息-第一个页面在网格中显示多个项目(时,它会将状态重置回初始(空(变量。

组件如下:

import { FETCH_CHANNELS } from '../actions/types';
// set the initial state first
const initialState = {
isLoading: true,
data: [],
error: ""
}
// set the state depending on the dispatch coming in
const channelsReducer = (state = initialState, action) => {
switch(action.type) {
case FETCH_CHANNELS:
// reduce the returned state down to an array of options
// filter here to limit to searchable only
const activeChannels = [];
action.payload['channels'].forEach( el => {
if(el.isChannelSearchable) {
let singleItem = {
key: el.channelId,
value: el.channelId,
text: el.channelName,
type: el.channelType
}
activeChannels.push(singleItem);
}
});
return {...state, data: activeChannels, isLoading: false};
case "ERROR":
return {...state, error: action.msg};
default:
return state;
}
}
export default channelsReducer;

我在这里的问题(在我看来(是initialState常量在一开始的初始化,每次刷新组件时,它都会再次设置为空。有道理。

如何保持FETCH_CHANNELS情况下返回的状态(该操作是对返回所有通道的后端api的调用(,以便在重新安装组件时仍然保持其状态?

不确定我是否必须这样做(很可能这些都不正确(:

  1. 在调用此操作的前端组件中尝试使用某些逻辑,如果数据已经存在,则不调用它
  2. 在redux存储中创建另一个状态,并在下拉列表中选择值后从前端组件更新该状态?或3。尝试在这里通过在reducer中设置一个变量来处理它,如果需要的话,逻辑会返回吗

就像我说的,我正在构建这个,试图学习一些关于反应和还原的知识,但我真的不确定处理这个问题的方法是什么…

更新,如怀疑。。。这两种选择都不正确。我没有正确调用生成点击事件的组件中的链接以深入到详细内容项。从react路由器dom实现Link是处理此问题的正确方法。

相关内容

  • 没有找到相关文章

最新更新