How To Share Redux Store In Multiple Components

Hi I have one component in which I integrated the redux in my react application. I am opening second then third component. I don't want the pass the data which I obtained in first

Solution 1:

Any component that is wrapped with connect:

connect(mapStateToProps, actions)(AnyComponent);

will have access to the entireredux store. With mapStateToProps you can pass just relevant piece of data from the redux store to the connected component via props.

About component internal state, my rule of thumb is to set internal state just for data that is relevant for the specific component. For example, extend or collapse state for a Drop-down.

As for ajax requests, if you already using redux I highly recommend to use actions with thunks or sagas and pass the new fetched data through the redux flow: Action/thunk -> Reducers -> connected components.

Edit As a followup to your comment, You don't need to pass every component you want to connect to the Provider, you just pass a root component (App in your case) and each child of App can connect to redux if necessary:

classSecondComponentextendsComponent {
  render() {
    return (
       // print score which is in redux<div>this.props.score</div> 
    );
  }
} 

exportdefaultconnect(mapStateToProps)(SecondComponent);

And as well as for other components:

classThirdComponentextendsComponent {
  render() {
    return (
       // print score which is in redux<div>this.props.score</div> 
    );
  }
} 

exportdefaultconnect(mapStateToProps)(ThirdComponent);

Edit #2 As a followup to your other comment:

so passing value in props to components or use above said approach, Idk which is recommended ?

Avoid connecting components when you can and pass down the props to the children, the main reason for this is to prevent dependency on redux. I prefer keep my components "dumb" as i can and let them concern only on how things should look. I do have some components that concern on how things should work and these components are mainly dealing with logic and passing down data to the children, they are the components i often connect.

When i notice that my app is scaling and some of my components are acting as a proxy of props (i even got a word for that! "Propxy"), that is they get props from their parent and pass them down without using them, i usually inject a connected component in the middle of the components tree so i can let the "propxy" components down the tree flow be more lighten and slim.

Solution 2:

The generic approach of using redux in react applications is use it along with react-redux library. That library provides connect function, which helps to access store in react components in more clean way.

Instead of trying to access store via context, just use connect function:

import { connect } from'react-redux';

constSecondComponent = ({ score }) => <div>{score}</div>// with help of `connect`, you are providing `score` prop to `SomeComponent`// next, you can render that connected component anywhere in your appexportdefaultconnect(
  (state) => ({
    score: state.score
  })
)(SecondComponent)

You could use connect for any of your react components such as ThirdComponent ad so on.