CODEWITHSUNDEEP
reactjsreduxreact-redux
preston
preston

Reputation: 4367

React-Redux Provider not working

My project uses React-Redux Provider.

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'));

and 

class App extends Component {

  componentDidMount(){

    API.getCategories().then((categories)=>{
      this.props.dispatch(addCategories(categories))
    })

    API.getAllPosts().then(posts => {
      console.log('getAllPosts', posts)
    })
  }

  render() {
    return (
      <div className="App">
        <Route exact path="/" render={()=>{
            return (
              <div>
                {
                  this.props.categories.map((category)=>{
                    return (
                          <Link key={category.name} to={`/category/${category.name}`} params={{category: category.name}} >{category.name}</Link>
                    )
                  })
                }
              </div>
            )
          }}
        />

        <Route path="/category/:category" component={Category} />

      </div>
    );
  }
}



function mapStateToProps(x) {

  return {
    categories: x.categories
  }
}

// export default App;

export default withRouter(connect(
  mapStateToProps,
)(App))

From the above code and based on my experience from a previous project, the Category component's this.props should have a dispatch method that I can call the actions with but for some reason it is not there.

This is my Category Component:

class Category extends Component {
  componentDidMount(){
    console.log('this.props of Category', this.props)

    var category = this.props.match.params.category

    API.getPosts(category).then((posts)=>{
      console.log('after getPosts', posts)
      this.props.dispatch(addAllPosts(posts))
    })
  }

  render(){
    return <p>Category</p>
  }
}

export default Category

What am I missing here???

Upvotes: 2

Views: 4260

Answers (1)

Michael Peyper
Michael Peyper

Reputation: 6944

You need to use the connect function from react-redux on your Category component so it has access to dispatch.

export default connect()(Category)

Also, it might just be simplified for SO, but App does not need to be wrapped in withRouter. This is only required if you need the router props injected into the component. Route does this automatically for any component it renders, which is why you don't need it on Category.

export default connect(mapStateToProps)(App)

Upvotes: 3

Related Questions