Call action inside of component | React, Redux

Question

I've read this article (https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3) a couple of times, but I'm still uncertain how to call your action inside of a component.

I've setup my actions and reducers correctly (I hope), so I'm at the last step now, which is using your action. I know that I first have to import my action and then use connect from redux to connect it to the store.

I currently have this in my component:

  componentDidMount() {
    this.serverRequest = axios
      .get('http://helloworld/customers')
      .then(res => {
        // Rerender state
        this.setState({
          res,
          dataToDisplay: res.data
        })
      })
  }

So my question is: How can I use my action inside of my component?

Solution

As anything else you have to pass the action creator to your component via props. You can do this by using the react-redux library and the mapDispatchToProps function.

You will want to "bind" your action creator first by wrapping it in another function that calls dispatch on your action creator.

I highly recommend reading the following redux docs as it explains it rather well and also provides examples.

https://redux.js.org/basics/usage-with-react#implementing-container-components