React + Redux:处理后调度逻辑的正确方法

问题描述 投票:1回答:2

我有一个具有某些内部状态(例如isLoading)的组件,该组件可以访问redux数据。在此组件中,我想调度一个重击操作(api请求),从而导致redux数据更改。压缩完成后,我需要更改组件的状态。在我看来,有两种方法可以做到这一点:

  1. 使用重击者的诺言回报,并在那里做我需要做的所有事情,例如
handleSaveClick = (id) => {
    const { onSave } = this.props;
    this.setState({ isLoading: true });
    onSave(id).then(() => this.setState({ isLoading: false }));
};
  1. 例如,将回调传递给thunk并从thunk本身将其触发
  handleSaveClick = (id) => {
    const { onSave } = this.props;
    this.setState({ isLoading: true });
    onSave(id, this.onSaveSuccess);
  };

哪种方法是正确的方法?

reactjs redux
2个回答
0
投票

更安全的方法是使用promise实现,因为您将sure该函数仅在promise被解决后才能运行。第二种实现没有固有的缺陷,但是如果thunk中的任何东西都是异步的,那么它将无法正常工作,因为一旦到达代码,它就会运行,而不是在其上面的代码完成执行时运行。当处理任何可能异步的内容(服务器请求/加载数据/提交数据)时,使用Promise实现总是更安全。


0
投票

基于更改redux状态(或与此相关的任何prop /状态更改)更新组件级别状态或运行回调函数的最佳做法可能是使用componentDidUpdate或useEffect:

componentDidUpdate(prevProps, prevState){
     if(prevProps.someReduxState !== this.props.someReduxState && this.state.isLoading){
        setState({isLoading:false})
     }
}

具有useEffect:

useEffect(()=>{
    if(!props.someReduxState){
         setLoading(true)
    } else {
         setLoading(false)
    }
},[props.someReduxState])

但是,我可能会建议一种不同的方法(取决于目标,尤其是取决于初始数据获取),该方法可管理redux中的状态加载:

改为使用加载值初始化您的redux状态:

export default someReduxState = (state = {notLoaded:true}, action) => {
    switch (action.type) {
        case actions.FETCH_SOME_REDUX_STATE:
            return action.payload;
        default:
            return state;
    }
}

然后您可以在组件中检查:

if (this.props.someReduxState.notLoaded ){
    // do something or return loading components
} else {
    // do something else or return loaded components
}
© www.soinside.com 2019 - 2024. All rights reserved.