React + Redux: правильный способ обработки логики после отправки

Question

У меня есть компонент с некоторым внутренним состоянием (например, isLoading), который имеет доступ к избыточным данным. В этом компоненте я хотел бы отправить групповое действие (запрос API), которое приведет к изменению избыточных данных. После завершения thunk мне нужно изменить состояние моего компонента. На мой взгляд, есть два способа сделать это:

1. Использовать обещание, возвращаемое thunk, и делать все, что мне нужно, например,

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

Передать обратный вызов в Thunk и запустить его из самого Thunk, например,

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

Какой из этих способов является правильным?

Answer 1

Вероятно, лучшая практика для обновления состояния уровня компонента или запуска функции обратного вызова на основе изменения состояния притока (или любых изменений реквизита / состояния в этом отношении) состоит в использовании 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])

Однако я мог бы порекомендовать другой подход (в зависимости от цели, особенно при первоначальной выборке данных), который управляет загрузкой состояния в избыточном:

Инициализируйте свое избыточное состояние с помощьювместо этого значение загрузки:

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
}

Answer 2

Более безопасный способ - использовать реализацию обещания, так как вы будете уверены, , что функция будет работать только после того, как обещание будет выполнено. Вторая реализация не имеет присущих ей недостатков, но если в вашем thunk есть что-то асинхронное, то она не будет работать правильно, так как будет работать после достижения кода, а не после завершения выполнения кода выше. При обработке всего, что может быть асинхронным (запросы сервера / загрузка данных / отправка данных), всегда безопаснее использовать реализации Promise.