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

Question

我有一个具有某些内部状态（例如 isLoading）的组件，它可以访问 redux 数据。在这个组件中，我想分派一个 thunk 操作（api 请求）导致 redux 数据更改。 thunk 完成后，我需要更改组件的状态。在我看来，有两种方法可以做到这一点：

1. 使用 thunk 的承诺返回并在那里做我需要的一切，例如

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);
  };

哪种方法是正确的？

Answer 1

更安全的方法是使用 Promise 实现，因为您会确定该函数只会在 Promise 解决后运行。第二种实现没有固有缺陷，但是如果您的 thunk 中的任何内容是异步的，那么它将无法正常工作，因为它会在到达代码后运行，而不是在上面的代码完成执行时运行。在处理任何可能异步的事情（服务器请求/加载数据/提交数据）时，使用 Promise 实现总是更安全。

Answer 2

更新组件级别状态或基于更改 redux 状态（或任何道具/状态更改）运行回调函数的最佳实践可能是使用 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
}