Search code examples
reactjsmongodbreduxreact-reduxredux-thunk

Calling API via redux in react app does not work


I am building a web app with MERN stack and using redux as the state management. I am now trying to load the data from mongoDB with my API and storing into redux before setting into react state. When calling the api with getShop() function directly from react app, the data is stored in react state and displayed in the app. However it does not work when i am trying to use it through redux as per my below codes. There are no errors, but just not loading any information.

Action:

load : () => {
       let thunk = (dispatch) => {
           api.getShops()
           .then(res => {
               let barbershops = res.data
               dispatch(barberFactory.set(barbershops))
           })
       }
       return thunk
   },

calling from react app:

function mapDispatchToProps(dispatch){
  return {
    loadBarber : () => {
      dispatch(barberFactory.load)
    },
  }
}

The function is called at componentDidMount()


Solution

  • Your load function needs to be called in order to return the inner action i.e.

    dispatch(barberFactory.load())