Confused about Redux createAction and dispatch

Question

I want to build a function in React + Redux that, when a user clicks a button, calls an API and loads the data into the store, then display the data on a page.

I want to use the redux-actions framework: https://redux-actions.js.org/ but I'm a little confused about different examples I've seen.

In some examples I see the following:

export const GET_USER_DATA = 'GET_USER_DATA';
export const getUserData = createAction(
  GET_USER_DATA,
  async () => {
      try {
          return await getUserInfo(config);
      } catch (error) {
          console.log("Error occurred");
      }
  },
);

and then I've seen other examples that use dispatch like this (taken from: https://codeburst.io/redux-actions-through-example-part-3-91dc41ebe4be):

const fetchPhraseRequest = createAction('PHRASE_FETCH_REQUEST');
const fetchPhraseResponse = createAction('PHRASE_FETCH_RESPONSE');
export const clearPhrase = createAction('PHRASE_CLEAR');
export const fetchPhrase = () => (dispatch) => {
  dispatch(fetchPhraseRequest());
  fromAPI.getPhrase()
    .then((value) => {
      dispatch(fetchPhraseResponse(value));
    })
    .catch((err) => {
      dispatch(fetchPhraseResponse(err));
    });
};

I'm new to React and Redux and am trying to understand why/when you would do one or the other..

A question I have about the first example: - without calling dispatch, will a reducer be able to act on this action? If so, how does this work without calling dispatch?

Where did you see the first example? – devserkan Jun 09 '18 at 05:07 — devserkan, Jun 09 '18 at 05:07

score 1 · Answer 1 · answered Jun 09 '18 at 05:33

I'm not so familiar with redux-actions library but I think in the first example you are creating an action but with a payload. payload here is what returns from async function in your creator. Second part (function) here is payloadCreator. I'm saying this by looking the related code: https://github.com/redux-utilities/redux-actions/blob/master/src/createAction.js

So for the first example the rest flows as regular. That createAction creates an action with a payload, uses it in handleActions. So, for your last question, no without calling a dispatch a reducer can't know what is going on. You don't worry about dispatching here since you are doing it in your App anyways. But, I don't see an example in the library's docs or the its creator's tutorials like that.

For the second example, we are using redux-thunk here for doing async jobs and multiple actions. So, we can use async jobs there and do multiple, conditional things in our action creator. Like dispatching different action creators. fetchPhraseRequest() and fetchPhraseResponse() are two different actions here and being dispatched for different situations. Maybe first one starts a process and set the state like "fetching", then second one got the response and set the state properly. We can even use an other separate error action like fetchPhraseError() in error block.

If your aim is to digest Redux more deeply I suggest working with pure Redux with redux-thunk. You will understand the whole async process, at least it worked for me.

Confused about Redux createAction and dispatch

1 Answers1