What is the proper way to handle data passing in Redux

Question

I am new to the concepts in Redux and simply: I am wondering how best to pass data from parent to child components.

I see a few approaches.

1. Have parent be a container and manage the business logic for the child and pass down appropriate data through props.
2. Have the child be a container and connect to the store that way data goes directly to the child.
3. Use contexts.

Here are the pros and cons I see of the approaches I tried.

Method 1:

• The parent component gets bloated with all the logic it has to juggle over multiple child components creating confusing logic and variable naming.
• It decouples from the store

Method 2:

• All the logic is nicely contained in the connected component
• It is strongly coupled to the store
• There is no easy way to see what props have changed in mapDispatchToProps without using a hackish thunk.

I haven't really experimented with contexts yet. I was wondering what the Redux way is of doing this. Personally I prefer #2 but the last con is a killer for me. If #3 is better please let me know. Thank you for your help.

Answer 1

Use redux-toolkit.

Create your store, state slices and their reducers using createSlice from @reduxjs/toolkit and every component can access the necessary data from store by using useSelector from react-redux.

There is no need for mapDispatchToProps anymore.