React-Router: ルート遷移前に非同期アクションを待機する方法質問する

Question

応答が成功または失敗するまで新しいルートへの移行を防止するという元の質問に答えるには、次のようにします。

redux thunk を使用しているため、アクションクリエーターの成功または失敗によってリダイレクトがトリガーされる可能性があります。特定のアクション / アクションクリエーターがどのようなものかはわかりませんが、次のようなものが機能する可能性があります。

import { browserHistory } from 'react-router'

export function loadInitialFormValues(formId) {
  return function(dispatch) {
    // hit the API with some function and return a promise:
    loadInitialValuesReturnPromise(formId)
      .then(response => {
        // If request is good update state with fetched data
        dispatch({ type: UPDATE_FORM_STATE, payload: response });

        // - redirect to the your form
        browserHistory.push('/myForm');
      })
      .catch(() => {
        // If request is bad...
        // do whatever you want here, or redirect
        browserHistory.push('/myForm')
      });
  }
}

フォローアップ。ルートに入るときやコンポーネントのcomponentWillMountでデータをロードし、スピナーを表示する一般的なパターン:

非同期アクションに関するReduxドキュメントよりhttp://redux.js.org/docs/advanced/AsyncActions.html

リクエストが開始されたことをリデューサーに通知するアクション。

リデューサーは、状態の isFetching フラグを切り替えることでこのアクションを処理できます。これにより、UI はスピナーを表示するタイミングであることを認識します。

リクエストが正常に終了したことをリデューサーに通知するアクション。

リデューサーは、新しいデータを管理対象の状態にマージし、isFetching をリセットすることで、このアクションを処理できます。UI はスピナーを非表示にし、フェッチされたデータを表示します。

リクエストが失敗したことをリデューサーに通知するアクション。

リデューサーは、isFetching をリセットすることでこのアクションを処理する場合があります。また、一部のリデューサーは、エラーメッセージを保存して UI に表示できるようにしたい場合があります。

私はあなたの状況を大まかなガイドラインとして、以下の一般的なパターンに従いました。Promiseを使用する必要はありません。

// action creator:
export function fetchFormData(formId) {
  return dispatch => {
    // an action to signal the beginning of your request
    // this is what eventually triggers the displaying of the spinner
    dispatch({ type: FETCH_FORM_DATA_REQUEST })

    // (axios is just a promise based HTTP library)
    axios.get(`/formdata/${formId}`)
      .then(formData => {
        // on successful fetch, update your state with the new form data
        // you can also turn these into their own action creators and dispatch the invoked function instead
        dispatch({ type: actions.FETCH_FORM_DATA_SUCCESS, payload: formData })
      })
      .catch(error => {
        // on error, do whatever is best for your use case
        dispatch({ type: actions.FETCH_FORM_DATA_ERROR, payload: error })
      })
  }
}

// reducer

const INITIAL_STATE = {
  formData: {},
  error: {},
  fetching: false
}

export default function(state = INITIAL_STATE, action) {
  switch(action.type) {
    case FETCH_FORM_DATA_REQUEST:
      // when dispatch the 'request' action, toggle fetching to true
      return Object.assign({}, state, { fetching: true })
    case FETCH_FORM_DATA_SUCCESS:
      return Object.assign({}, state, {
        fetching: false,
        formData: action.payload
      })
    case FETCH_FORM_DATA_ERROR:
      return Object.assign({}, state, {
        fetching: false,
        error: action.payload
      })
  }
}

// route can look something like this to access the formId in the URL if you want
// I use this URL param in the component below but you can access this ID anyway you want:
<Route path="/myForm/:formId" component={SomeForm} />

// form component
class SomeForm extends Component {
  componentWillMount() {
    // get formId from route params
    const formId = this.props.params.formId
    this.props.fetchFormData(formId)
  }

  // in render just check if the fetching process is happening to know when to display the spinner
  // this could also be abstracted out into another method and run like so: {this.showFormOrSpinner.call(this)}
  render() {
    return (
      <div className="some-form">
        {this.props.fetching ? 
          <img src="./assets/spinner.gif" alt="loading spinner" /> :
          <FormComponent formData={this.props.formData} />
        }
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    fetching: state.form.fetching,
    formData: state.form.formData,
    error: state.form.error
  }
}

export default connect(mapStateToProps, { fetchFormData })(SomeForm)

Answer 1

応答が成功または失敗するまで新しいルートへの移行を防止するという元の質問に答えるには、次のようにします。