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?
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.
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.
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.
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 ...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With