How can you use a React component's local state inside of the mapStateToPropsMethod?

user_7117308 0
Viewed 551

I have a react component which creates some local state: a query identifier. This query identifier is created when the component is created and is not/should not be passed in from a consumer of the component. This state is only used within the component instance and is not shared amongst anything else -- as such, it feels like it is appropriate to be local state in the component and not stored in the redux store.

The react component dispatches an async action via redux and when the action completes, the result is stored in a collection in the redux state that is indexed by the aforementioned query id.

In the React components mapStateToProps function, I want to retrieve the query results from the query results collection in the redux state. However, the query id for the component is only in the local state of the component instance and thus not obviously accessible from mapStateToProps (since mapStateToProps is not a member of the component class and does not obviously have a way to access the local state of that instance).

Is there an established way of accessing the local state of a React component when inside of mapStateToProps? I know I could store that local state in redux (so it's available in mapStateToProps), but it seems like it would be unnecessary since the state is really local to each component instance. The ownProps parameter looked interesting but it seems like that requires consumers of my React component to pass a value in the props when the component is instantiated, which is not necessary (confusing, even) here.

Is there an expected way to do this? Or have I designed my component wrong such that I shouldn't be trying to use component local state to properly map redux state to component props?

Thanks!

react-redux redux react-native reactjs
1 Answers

It isn't possible to access a component state in mapStateToProps method since its used within connect which is a wrapper over the component.

You can however get those values within mapStateToProps if you either lift the state up to the parent of the component and then pass it as props to the child. In such a case, you can access the value in mapStateToProps using the ownProps argument. However its unnecessary to move the state to the parent if its just local to this particular component. Similar is a case if the state is moved to redux store.

A better way of handling such a scenario is to pass the entire set of value from mapStateToProps on to the component and then you implement a memoized method that returns the result based on the data and the query id

Ex:

const mapStateToProps = (state, props) => {
   return {
       collection: resultCollectionSelector(state, props)
   }
}

and in components render method(you can also do it in componentDidUpdate and set the value to state is you require to use it in method apart from render)

constructor(props) {
    super(props);
    this.getMemoizedFilteredResult = _.memoize(this.getFilteredResult);
}
getFilteredResult = (collection, query) => {
     // process and return result
}
render() {
    const queryResult = this.getMemoizedFilteredResult(this.props.collection, this.state.query);
    ...
}
user_59281860
Related