Question

我正在制作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状态同步。

环境

react@15.3.1
redux@3.6.0
redux-thunk@2.1.0

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

并且在reducer中需要在GET_MY_CONFIG_SUCCESS操作时更新myConfig

...
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 
    ]),
  };
};

Answer 2

阅读这篇关于你should know about Redux的好文章，你会发现：

mapStateToProps中的非规范化数据是正常的。当我第一次开始使用Redux时，我不确定在mapStateToProps函数中进行“计算”是否犹豫不决。我没有在Redux repo或docs中看到这样的例子。我花了几周时间在mapStateToProps中找到其他人使用“selector”。你不知道我是多么兴奋地发现其他人这样做了！

希望这可以帮助别人！

ReactJS + Redux：如何处理依赖于另一个道具的道具

2 个答案:

编辑：如果myConfig为null并等待从服务器获取该怎么办？

原始答案