CODEWITHSUNDEEP
reactjsreduxstatereact-redux
mangocaptain
mangocaptain

Reputation: 1495

How does a container component update its child component through react redux?

Looking at the reddit example off of the react redux docs, I'm having difficulty see how the posts list component updates itself based on the state of the picker changing. Is it through the componentWillReceiveProps life cycle method in the container method that's causing this? This is how I see the flow of data and state change:

  1. user selected reddit
  2. store state is changed
  3. store is props of container component, so in effect it's props is changed
  4. componentWillReceiveProps is triggered and dispatches fetchPostsIfNeeded
  5. posts list is changed

Is this correct?

Upvotes: 0

Views: 469

Answers (1)

user6144056
user6144056

Reputation:

This Redux example connects the AsyncApp container and its children, the Picker & Posts components, to the Redux store via the react-redux libraries connect method. The connect method takes a mapStateToProps and mapDispatchToProps functions to enable the container to pass the redux state and actions to the child components as props.

Now the child component has access to those props eg. const { selectedSubreddit, posts, isFetching, lastUpdated } = this.props. And it can also dispatch those actions to update the redux store and that will in turn update those props it has connected to.

Redux is a way to manage your application state and it does not care about your UI or whether you use React. React-redux is a library that provides bindings from your React components to your Redux store.

Upvotes: 1

Related Questions