2

私の React/Redux アプリケーションには、いくつかの非同期アクションがあります。ユーザーがgetDataサーバーへのリクエストを開始するとします。すぐに aGET_DATA_REQUESTがディスパッチされ、getDataAJAX 呼び出しがサーバーに向かっています。

成功または失敗すると、それに応じてGET_DATA_SUCCESSまたはGET_DATA_FAILUREアクションがディスパッチされ、データが UI にレンダリングされます。

react-router-reduxここで、AJAX コールバックへの反応として、アプリケーションに ( を使用して) 履歴状態をプッシュさせたいと考えています。つまり、成功すると、ユーザーは別の URL (ルート) に「リダイレクト」され、新しく受信したデータに依存する別のモジュールが表示されます。

この機能をレデューサーに含めるのは非常に悪い考えだと思います。これはもはや純粋ではなくなるためです (URL の変更は副作用です)。

何かご意見は？

ありがとう

4

2 に答える 2

9

これがあなたの状況に対処する良い方法だと思います。

まず、リダイレクトするかどうかを知るために、レデューサーに新しいプロパティを追加する必要があります。

このようなもの

const initialState = {
   ...
   redirect : false // You could use a String with the new url instead of true/false
   ....
}

switch ...
case GET_DATA_SUCCESS:
       return {
            ...state,
            redirect:true,
       }
case GET_DATA_FAILURE;
      return {
          ...state,
          redirect:false
      }

次に、レデューサーに接続されたコンポーネントで、componentDidUpdate 関数の「redirect」の値を確認する必要があります。

componentDidUpdate(){
        let {redirect} = this.props.yourReducerState;
        if(redirect === true){
            this.context.router.push("new-url");
        }
    }

最後に、componentWillUnmount の「リダイレクト」をリセットする必要があります。

それが役に立てば幸い！

于 2016-04-27T10:19:00.467 に答える