Вызов API в componentDidMount или при нажатии кнопки

Question

Я новичок в react-redux.Здесь у меня есть кнопка, которая выглядит как

<button className="btn btn-primary fetchBtnSize"
            disabled={this.state.disableFetchQuestion}
            onClick={() => this.fetchQuestions()}>
            Fetch Questions
                </button>
        </div >

Теперь, в этом методе

fetchQuestions() {   this.props.fetchQuestions(result); }

Теперь в моем действии,

export function fetchQuestions(arrayOfQuesObjs) {
    return (dispatch) => {
        dispatch({
            type: REQUEST_INITIATED
        });
        post(FETCH_QUESTIONS_URL, arrayOfQuesObjs)
            .then((response) => {
                if (response.status === 200) {
                    dispatch({
                        type: REQUEST_SUCCESSED,
                    });
                    history.push('/quiz-questions');
                    dispatch({
                        type: FETCHING_QUESTIONS_SUCCESS,
                        data: response.payload,
                    })
                }
                else {
                    dispatch({
                        type: REQUEST_SUCCESSED
                    });
                    toastr.error(response.status.message);
                    dispatch({
                        type: FAILED_QUESTIONS_FETCHING,
                        data: response.status,
                    });
                    if (response.status === 401) {
                        toastr.error("Please login again");
                        localStorage.clear();
                        history.push('/');
                    }
                }
            })
    }
}

Итак,здесь Только после успеха я перенаправляю пользователя на quiz-questions page.

Теперь, на этом я рендеринг одного компонента.

Теперь, что происходит, когда пользователь нажимает на страницу перезагрузкиquiz-questions того времени эти данные, которые были получены с сервера, теряются.потому что государство очищается.Теперь то, что я сделал, было

on history.push({ pathName: '/quiz-questions', state : { data: 1, isfetch: true   }})

таким образом, что, когда я нажму на кнопку перезагрузки, я возьму эти данные из props.location.state.data

, а затем

componentDidMount() { this.props.fetchQuestions(props.location.state.data);  }

Теперь, здесь, что происходит, по щелчку button Если я удаляю вызов API и перенаправляю пользователя на /quiz-questions, тогда в случае сбоя API, пользователь должен быть на previous page only

Итак, я не понимаю, как это назвать API.Если я оставлю это в обоих местах, тогда it will call two times.Так, как я могу решить это?

Answer 1

Ни в коем случае данные в избыточном хранилище не сохраняются после перезагрузкиВы должны разобраться с этим делом логически.Взгляните на этот учебник.Вы должны управлять потоком своих данных таким образом.

Вкратце, любые данные, которые вам нужны на нескольких маршрутах даже после перезагрузки, должны быть извлечены в компоненте App (родительский компонент) в componentDidMount() ловушке жизненного цикла.Также, если возможно, попробуйте history.push() всегда, так как это не приводит к потере данных при изменении маршрута.Надеюсь, это поможет, удачи!