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

Question

反应 16.3 终极版 3.7.2

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

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

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

文档指出组件在卸载时被销毁，但情况似乎并非如此，因为当您转到此页面或您在该页面上并重新加载时状态不同。

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

很遗憾，我无法为您提供代码示例 - 但任何接触过这种奇怪行为的人都应该认出我的描述....

Answer 1

您的组件可能会以 "old" 状态重新呈现，因为 这是您存储在 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();
  }
}

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

Redux connected react app - how do I NOT render it until my side effect is complete?

javascript

reactjs

redux

react-redux