0

を作成してGraphいReact.Componentます。の場合componentWillMount、このグラフは非同期アクションを使用して構成ファイルをロードします。構成ファイルには、取得する必要があるクエリ情報も含まれています。

今のところ、2 つの要求 (構成 + クエリ) を連鎖させ、その結果を現在の Redux 状態に保存しています。

{
    configurations: [{
        "my-configuration": 
        {
            // information about the configuration
            query: "my-query"
        }
    }],
    queries: [{
        "my-query" : {
            // information about the query
        }
    }]
}

Graphコンポーネントをconnected両方の変数にしたいと思います。ただし、構成がフェッチされる前のクエリ名はわかりません。

const mapStateToProps = (state, ownProps) => ({
    configuration: state.getIn([
        "configurations",
        ownProps.configurationName
    ]),
    query: state.getIn([
        "queries",
        queryName // the name of the query comes is known in the configuration
    ]),
});

設計上の問題に直面するかもしれませんが、フィードバックをお寄せください。この状況にどのように対処しますか?

今のところ、コンポーネントの状態を作成しましたが、redux 状態と同期する必要があります。

環境

  • 反応 @ 15.3.1
  • redux@3.6.0
  • redux-thunk@2.1.0
4

2 に答える 2

1

編集: myConfig が null で、サーバーからフェッチされるのを待っている場合はどうなりますか?

セレクターは

const mapStateToProps = (state, ownProps) => {
  const myConfig = state.getIn([
    "configurations",
    ownProps.configurationName
  ]);
  return {
    configuration: myConfig,
    query: myConfig ? state.getIn([
        "queries",
        myConfig.queryName 
    ]) : *defaultQuery*,
  };
};

myConfigまた、非同期アクションを処理する必要があります。

const getMyConfig = (...args) => (dispatch) => {
  dispatch(GET_MY_CONFIG_REQUEST);
  api.getMyConfig(...args)
    .then((res) => dispatch({ type: GET_MY_CONFIG_SUCCESS, res }))
    .catch((err) => dispatch({ type: GET_MY_CONFIG_FAIL, err }));
}

myConfigレデューサーでは、GET_MY_CONFIG_SUCCESS アクションで更新する必要があります

...
case GET_MY_CONFIG_SUCCESS:
  return { ...state, myConfig: action.res };
...

元の回答

このようなもの？

const mapStateToProps = (state, ownProps) => {
  const myConfig = state.getIn([
    "configurations",
    ownProps.configurationName
  ]);
  return {
    configuration: myConfig,
    query: state.getIn([
        "queries",
        myConfig.queryName 
    ]),
  };
};
于 2016-09-23T19:15:27.593 に答える
0

Redux について知っておくべきことについてのこの素晴らしい記事を読むと、次のことがわかります。

mapStateToProps でデータを非正規化するのは正常です。Redux を使い始めた当初は、mapStateToProps 関数で「計算」を行うことが適切かどうか確信が持てませんでした。Redux リポジトリやドキュメントでこの例を見ませんでした。mapStateToProps で「セレクター」を使用している他のユーザーを見つけるのに数週間かかりました。他の誰かがこれをやっているのを見つけたとき、私がどれほど興奮したか、あなたにはわかりません!

これが他の誰かを助けることを願っています!

于 2016-10-07T15:17:11.437 に答える