CODEWITHSUNDEEP
reactjsredux
Thian Kian Phin
Thian Kian Phin

Reputation: 931

redux container to connect multiple component

I have a list page and a create page, I have no problem doing the list page. The list page will have action, reducers and store, I've no problem with that. Now I'm stuck on how to connect one store to multiple component. 

import { connect } from 'react-redux';
import Ads from '../../components/admin/ads';
import createAd from '../../Components/admin/createAd' // how to connect this too?

//redux action
import { getAds } from '../../actions/admin/ads';

const mapStateToProps = (state) => ({
  data: state.adsReducer
})

const mapDispatchToProps = (dispatch) => {
  return {
    getAds: () => {
        dispatch(getAds())
    }
  }
}

const AdsContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(Ads)

export default AdsContainer;

It make no sense for a new page createAd to have its own container as it fall under ads category.

Upvotes: 0

Views: 738

Answers (1)

ohsully
ohsully

Reputation: 502

You probably want to connect the store to an <App> component which sits above both the List and Create components --- then you can pass the data down to each.

Fundamentally, if you want <ComponentB> to get data provided by a connect(...)(ComponentA) call, then <ComponentB> needs to be a child of <ComponentA>. That's just regular React, data flows down the tree. If you want it to flow to a different part of the tree, move the data higher.

Upvotes: 1

Related Questions