Question

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

使用重击的诺言回报，并在那里做我需要的所有事情，例如

timer?.invalidate() //cancels the timer if it hasn't fired

将回调传递给thunk，然后从thunk本身将其触发，例如

handleSaveClick = (id) => {
    const { onSave } = this.props;
    this.setState({ isLoading: true });
    onSave(id).then(() => this.setState({ isLoading: false }));
};

哪种方法是正确的？

Answer 1

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

Answer 2

基于更改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
}

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

2 个答案: