ReactJS+Redux: How to handle a prop that depends on another props - reactjs

Question

I am creating a Graph a React.Component. When componentWillMount, this graph will be in charge of loading a configuration file using an Async Actions. Configuration file also contains a query information that needs to be fetched.
For now, I am chaining the two requests (configuration + query) and store their results in the current Redux state.
{
configurations: [{
"my-configuration":
{
// information about the configuration
query: "my-query"
}
}],
queries: [{
"my-query" : {
// information about the query
}
}]
}
I'd like my Graph component to be connected to both variables. However, I am not aware of the query name before the configuration is fetched.
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
]),
});
I might face a design issue, but I wanted to have your feedback. How would you deal this situation ?
For now, I created a state for the component but it would need to be in sync with the redux state.
Environment
react#15.3.1
redux#3.6.0
redux-thunk#2.1.0

Answer 1

Edit: what if myConfig is null and waiting to be fetched from server?
Selector becomes
const mapStateToProps = (state, ownProps) => {
const myConfig = state.getIn([
"configurations",
ownProps.configurationName
]);
return {
configuration: myConfig,
query: myConfig ? state.getIn([
"queries",
myConfig.queryName
]) : *defaultQuery*,
};
};
And you should handle getting myConfig in async action.
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 }));
}
And in reducer need to update myConfig upon GET_MY_CONFIG_SUCCESS action
...
case GET_MY_CONFIG_SUCCESS:
return { ...state, myConfig: action.res };
...
Original Answer
something like this?
const mapStateToProps = (state, ownProps) => {
const myConfig = state.getIn([
"configurations",
ownProps.configurationName
]);
return {
configuration: myConfig,
query: state.getIn([
"queries",
myConfig.queryName
]),
};
};

Answer 2

Reading this nice article about things you should know about Redux, here is what you will find:
Denormalizing data in mapStateToProps is normal. When I first started using Redux, I wasn’t sure if it was kosher to do “computation” in mapStateToProps functions. I didn’t see examples of this in the Redux repo or docs. It took a few weeks for me to find somebody else using a “selector” in mapStateToProps. You have no idea how excited I was to discover somebody else doing this!
Hope this could help someone else!