Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

difference between return and dispatch in actions: Redux

Tags:

reactjs

redux

I have noticed that sometimes actions in Redux use return and others dispatch. I also noticed that dispatch is used when there is some async operation in that action function, like reading/posting from/to a database, but I don't understand why. Could anyone shed some light on the crucial difference. Why don't we use dispatch all the time for example, as in context API in React?

EDIT: I will add an example, that doesn't deal with the backend, so there is no async await cycle:

 //with return
    export const addLog = (log) => {
       return{
         type: ADD_LOG,
         payload: log
       }
    }
    //with dispatch
    export const addLog = (log) => disptach => {
       dispatch{
         type: ADD_LOG,
         payload: log
       }
    }

What's the difference between the two?

like image 341
BlackMath Avatar asked Oct 26 '19 06:10

BlackMath


People also ask

What happens when you dispatch an action Redux?

The app code dispatches an action to the Redux store, like dispatch({type: 'counter/incremented'}) The store runs the reducer function again with the previous state and the current action , and saves the return value as the new state.

Can Redux actions return value?

Redux actions do not return anything. They just trigger changes of the global state which you can then listen to. If you need to e.g. fetch data (to update the state with) inside an action you need some kind of async action which e.g. redux-thunk provides.

What happens when you try to dispatch an action within a reducer?

Dispatching an action within a reducer is an anti-pattern. Your reducer should be without side effects, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

Can I dispatch multiple actions Redux?

Using an async middleware like Redux Thunk certainly enables scenarios such as dispatching multiple distinct but related actions in a row, dispatching actions to represent progression of an AJAX request, dispatching actions conditionally based on state, or even dispatching an action and checking the updated state ...


1 Answers

I am quite surprised nobody has come up with a definite answer. This comes really late but I will post this for people having the same question using redux-thunk as an example. As per the docs:

there is just one important thing you need to know: by using this specific middleware, an action creator can return a function instead of an action object. This way, the action creator becomes a thunk

The function returned receives the dispatch method as an argument, which you should use to trigger state updates, since the function by itself cannot dispatch actions event if you return an object. For example:

const getEvents = () => {
  return async (dispatch) => {
    const res = await fetch(
        'https://someendpoint/events'
    );
    const events = await res.json();

    return { // <-- this will NOT be sent to any reducer
        type: GET_EVENTS,
        events: [],
    };

   dispatch({ // <-- this will 
        type: GET_EVENTS,
        events,
    });
 };

};

The section on Async Action creators explains this in more detail.

like image 83
Abraham L Avatar answered Sep 24 '22 23:09

Abraham L