0

我正在创建Graph一个React.Component. 当 时componentWillMount，此图将负责使用异步操作加载配置文件。配置文件还包含需要获取的查询信息。

现在，我将两个请求（配置 + 查询）链接起来，并将它们的结果存储在当前的 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 为空并等待从服务器获取怎么办？

选择器变成

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 }));
}

并且在减速器中需要更新myConfigGET_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 回答