Question

我是第一次使用Redux设置我的React项目，并且遇到了问题。

我有一个基本的容器，mapStateToProps，action creator和reducer，但我有这个问题，当我加载某个页面时，之前的prop值会在正确的值之前加载到页面被抓住了。这是有道理的，但是我想知道是否有办法解决这个问题，以便在加载此组件/容器时，值将被清除。（或者，对于这个特定的用例，它是否更好地使用React状态而不是Redux状态？其余的页面使用Redux是有意义的，但这是唯一的情况，这会成为一个问题）

假设我有一个页面显示某些项目的某些状态：somePage.com/items /

组件和容器的设置如下（为了示例，为骨架）：

class SomeComponent extends React.Component<......> {
   constructor(props) {
       super(props);
       props.dispatch(fetchItemDetail(params));
   }
   render() {
       // use the stuff in props to display item's info
   }
}

function mapStateToProps(state) {
   return {
      someItemDetail: state.someItemDetail.X;
      someOtherInfo: state.someDetail.Y;
   }
} 

export const ItemDetailContainer = connect(mapStateToProps)(SomeComponent)

动作创建者涉及调用API并返回有效负载，而reducer只是一个标准的reducer，它将API调用的结果粘贴到状态中。

基本上，这＆＃34;工作＆＃34;，但如果我从带有ItemX参数的SomeComponent导航，然后点击链接转到ItemY的SomeComponent，ItemX的信息将显示，直到致电提取物品的信息完成，然后会出现ItemY的信息。

处理此问题的推荐方法是什么？看起来我不能在施工时清除道具，因为它们是只读的。有什么想法吗？

Answer 1

自我回答：

我得到了一些工作。基本上，我最终只创建了一个动作创建者clearItemDetail w / CLEAR_ITEM_DETAIL类型。当reducer看到CLEAR_ITEM_DETAIL的操作时，他们就会清除＆＃34;清除＆＃34;那部分国家。（我有很多要清楚的事情，所以我的行动和减速器比这更复杂。）

我在组件的clearItemDetail()生命周期方法中发送了componentWillUnmount()动作创建器，现在似乎正在运行。

不确定这是否是最好的路线。

Answer 2

看起来fetchItemDetail是一个异步调用。既然如此，为fetchItemDetail编写一个reducer来清除ItemY的数据。 reducer可以与中间件共存以处理异步调用。

case FETCH_ITEM_DETAIL:
    return Object.assign({}, state, {ItemY: null});
    break;

您可以处理组件中ItemY中的空值，以便不显示任何数据。然后，在完成异步调用后，分配返回的值（这听起来像已经完成，因为在调用完成时ItemY数据会出现）：

case FETCH_ITEM_COMPLETE:
    return Object.assign({}, state, {ItemY: [your item y data]});
    break;

Redux - 在加载新值之前短暂显示props / state的先前值

2 个答案: