Redux连接的react应用程序-如何在我的副作用完成之前不渲染它

Question

React 16.3Redux 3.7.2

在componentDidMount中，我调用了一个通过副作用(AJAX(填充道具(mapDispatchToProps)的操作。

我的问题是，它首先重用redux-render中的旧道具，然后在更新通过mapDispatchToProps到达后重新渲染。

我不想让这个子组件记住它的状态或道具——我需要它每次都是一张白纸。

文档指出，组件在卸载时被销毁，但事实并非如此，因为当您转到此页面或在页面上重新加载时，状态会有所不同。

因为重新加载时没有数据，所以页面必须等待副作用完成。

不幸的是，我无法向您提供代码示例，但任何接触过这种奇怪行为的人都应该认识到我的描述。。。。

Answer 1

您的组件可能会以"旧"状态重新呈现，因为这是您存储在redux中的状态，并且正在传递给组件。

您可以在componentWillUnmount中触发一个redux操作来破坏该状态。

EG(伪伪伪代码(:

减速器：

const initialState = { counter: 0 };
const myReducer = (state = initialState, action) => {
switch(action.type) {
case 'DO_SOMETHING':
return {
...state,
counter: state.counter + 1
};
case 'CLEAN_STATE':
return initialState;
}
}

组件：

class MyComponent extends React.Component {
render () {
return (
<div>
<span>{this.props.counter}</span>
<button onClick={triggerActionThatCausesDO_SOMETHING} />
</div>
);
}
componentWillUnmount () {
triggerActionThatCausesCLEAN_STATE();
}
}