React redux初始化功能，无论状态变化如何

React-redux initialization function regardless of state changes

本文关键字：状态 变化 redux 初始化 功能 React      更新时间：2023-09-26

我真的不知道如何尽可能精确地描述。在异步调用之后，我需要某种初始化函数，不管以后状态是否更改，它都只会被调用一次。

我有一个组件，当它安装时，我使用action creator发出异步请求以获得一些默认值，稍后我还调用somethingElse()，这使我的UI再次重新呈现，因为状态已更新：

这是动作创造者：

export function requestDefaults(){    
  return {
    type:     REQUEST_DEFAULTS,
    payload:  axios.get(ROOT_URL),
  };
}
export function somethingElse(){    
  return {
    type:     SOME_OTHER,
    payload:  "Whatever",
  };
}

还有我的减速器：

switch (action.type) {
    case REQUEST_DEFAULTS:
      return action.payload.data;
      break;
    case SOME_OTHER:
      return action.payload;
      break;
    default:
      return state;
}

在我的组件中——当它被攻击时，我发出异步请求，当我收到响应时，我使UI可见——在这种简化的情况下，是一个按钮，它调用somethingElse:

componentDidMount(){
   this.props.requestDefaults();
 }

render(){
  // Have received async data show button - THIS NEEDS TO BE ONLY ONCE
  if( this.props.defaults.data !== undefined ){
     <a onClick={ this.props.someThingElse }>do it</a>
  }
}
// REQUEST_DEFAULTS & SOME_OTHER
function mapStateToProps( { defaults, someOther} ){
  return { defaults, someOther} 
}

现在，每当我调用this.props.someThingElse时，都会对状态进行更改，在我的render()函数中，按钮会再次被重新渲染，这就是问题所在——当我接收异步数据时，我只需要渲染一次。但现在状态更新了，render()再次被调用，因为现在我有了this.props.defaults.data，我的按钮再次被重新呈现，但我需要在第一次异步调用后只做一次，而不是在以后状态更改时。。。

您可以使用shouldComponentUpdate方法，并且只有在默认数据更改时才能重新渲染。在您的情况下，默认数据只更改一次（默认情况下，在下一步有一些数据时为空），因此渲染方法将只调用一次。

shouldComponentUpdate(nextProps, nextState) {
  return this.props.defaults.data !== nextProps.this.props.defaults.data;
}
相关文章：