Redux: when to use store.dispatch() vs dispatch()

JavaScript
1

I’m going through the Redux challenges, and I am having a hard time understanding when to use dispatch() instead of store.dispatch(). My initial understanding was that dispatch is a method for Redux store. Is that accurate? My guess is that if dispatch is also being called from a function passed to store.dispatch() I can use dispatch(), but for some reason I can’t reason why that’s the case. If someone could help explain that’d be greatly appreciated! Please see my example code from Redux: Use Middleware to Handle Asynchronous Actions. In handleAsync() I use dispatch(), but if I were to use handleAsync(), I’d need to call it like store.dispatch(handAsync())

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {

    //dispatch being called
    dispatch(requestingData());

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // dispatch being called
      dispatch(receivedData(data))
    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);
//store.dispatch used
store.dispatch(handAsync())
1 Like
2

store.dispatch inside action creators, otherwise mapDispatchToProps then dispatch inside components. Latter is normally more sensible. Note has been a year or so since I used Redux, but that was the rule of thumb afaic remember. When you’re using React Redux you should only need dispatch 99% of the time, because you don’t need to directly access the store once it’s been set up and out into the <Provider> component. This is as far as I remember though, someone who’s used it more recently may be able to give you more direction.

1 Like
3

First, they are the same thing. You’ll mostly use dispatch because that’s what is passed around between your application, but you could just as well setup store as some global and use that instead, which I don’t recommend.

You have a hard time there because everything is in one big file, but imagine, in a real app, everything would be in its own file and you probably wouldn’t have access to the store everywhere. In this example, since everything is in one file, you can replace dispatch inside handleAsync for store.dispatch and it will do the same thing. I’m not sure if the tests will accept it though.

2 Likes
4

Thanks for the responses! I think it makes more sense to me now.

1 Like
5

Thanks for the responses!