Javascript 如何在创建React组件时初始化其Redux状态？

我有一个路由（使用React Router）和它渲染的组件。每次打开此路由并创建其组件时，我都需要重置此组件中使用的部分Redux状态（实际上是一个reducer的状态）。这个reducer在应用程序的其他部分共享，所以我使用Redux状态，而不是本地组件的状态。那么，如何在每次创建组件时重置减速器的状态呢？我想知道这样做的最佳实践

• 我想，如果我在componentDidMount方法中调度操作，前一个状态会闪烁几秒钟

• 我可以在组件的构造函数中调度操作来重置某些减速机的状态吗

• 有没有更好的办法？我是否可以在connect（）函数中设置初始状态，以便组件在每次创建时都重置状态？我查了一下文件，但找不到支持这一点的论据

---

是的，您可以在构造函数中调度操作以更改减速机状态

constructor(prop){
    super(prop);
    prop.dispatch(action);
}

您可以尝试的另一种方法是设置默认道具，这样您就不需要调用reducer（分派操作）

---

我能想到一个可能的解决办法

如果可以使用第一种方法，则可以尝试在使用重置状态重新渲染组件时停止显示上一个状态

在初始渲染期间，您将看到prevState的唯一阶段。使用实例变量跟踪渲染计数如何

草稿

import React from "react";
import { connect } from "react-redux";
import { add, reset } from "./actions";
class Topics extends React.Component {

  renderCount = 0;

  componentDidMount() {
    // Dispatch actions to reset the redux state
    // When the connected props change, component should re-render
    this.props.reset();
  }

  render() {
    this.renderCount++;
    if (this.renderCount > 1) {
      return (
        <div>
          {this.props.topics.map(topic => (
            <h3 id={topic}>{topic}</h3>
          ))}
        </div>
      );
    } else {
      return "Initializing"; // You can return even null
    }
  }
}

const mapStateToProps = state => ({ topics: state });
const mapDispatchToProps = (dispatch) => {
  return {

    add(value){
      dispatch(add(value));
    },
    reset(){
      dispatch(reset());
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Topics);

从“React”导入React；
从“react redux”导入{connect}；
从“/actions”导入{add，reset}”；
类主题扩展了React.Component{
renderCount=0；
componentDidMount（）{
//分派操作以重置redux状态
//当连接的道具更改时，组件应重新渲染
this.props.reset（）；
}
render（）{
这个.renderCount++；
如果（this.renderCount>1）{
返回(
{this.props.topics.map（topic=>(
{主题}
))}
);
}否则{
返回“初始化”；//您甚至可以返回null
}
}
}
const-mapStateToProps=state=>（{topics:state}）；
const mapDispatchToProps=（调度）=>{
返回{
增加（价值）{
派遣（增值）；
},
重置（）{
调度（重置（））；
}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（主题）；

这里的

renderCount

是一个类变量，它在组件

render

上不断递增。在第一次渲染时显示回退UI以避免显示以前的状态，在第二次渲染时（由于redux存储更新），可以显示存储数据

下面添加了一个工作示例。我还添加了一种避免后备UI的方法。看看是否有用

import React from "react";
import { connect } from "react-redux";
import { add, reset } from "./actions";
class Topics extends React.Component {

  renderCount = 0;

  componentDidMount() {
    // Dispatch actions to reset the redux state
    // When the connected props change, component should re-render
    this.props.reset();
  }

  render() {
    this.renderCount++;
    if (this.renderCount > 1) {
      return (
        <div>
          {this.props.topics.map(topic => (
            <h3 id={topic}>{topic}</h3>
          ))}
        </div>
      );
    } else {
      return "Initializing"; // You can return even null
    }
  }
}

const mapStateToProps = state => ({ topics: state });
const mapDispatchToProps = (dispatch) => {
  return {

    add(value){
      dispatch(add(value));
    },
    reset(){
      dispatch(reset());
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Topics);