score:0
a different solution is to use the redux-saga middleware. this lets you write something like this:
function* loadchefssaga() {
# takelatest sets up a system that spawns the inner generator every time
# an action matching the pattern is dispatched. if the inner generator
# is still running when additional actions are dispatched, it is cancelled,
# and a new one is spawned.
yield takelatest('recipe_selected', function* (recipe) {
# when a promise is yielded, the generator is resumed when the promise
# resolves. alternatively, if it rejects, the rejected value is thrown
# into this generator.
const {chefs} = yield loadchefs(recipe)
# assuming chefsloaded is an action creator for chefs_loaded
# `put` is redux-saga's equivelent of `dispatch`. we use it because
# the saga doesn't have direct access to the `dispatch` function.
yield put(chefsloaded(chefs))
})
}
i'm assuming that you have a basic familiarity with how javascript generators work. if not, go look them up; they're a powerful pattern. in this case, redux-saga uses them to construct functions that can block on things. every time something is yielded, redux-saga treats it as an "effect" that it knows how to process. for instance, when a promise
is yielded, redux-saga sets it up so that the generator is resumed when the promise resolves (or something is thrown into the generator if it rejects).
score:4
are you familiar with redux-thunk? https://github.com/gaearon/redux-thunk
with redux-thunk applied as middleware, you can do something like this:
function selectrecipe(recipe) {
return function (dispatch) {
dispatch(setrecipe(recipe));
return loadchefs(recipe).then((res) =>
dispatch(setchefs(res.chefs))
);
};
}
where setrecipe
and setchefs
are simple action creators. e.g.
function setrecipe(recipe) {
return {
type: set_recipe,
recipe
};
}
function setchefs(chefs) {
return {
type: set_chefs,
chefs
};
}
i recommend reading the docs on async actions. https://redux.js.org/advanced/async-actions
Source: stackoverflow.com
Related Query
- Redux dispatch actions in response to actions
- Firing Redux actions in response to route transitions in React Router
- Redux ToolKit: is it possible to dispatch other actions from the same slice in one action created by createAsyncThunk
- How to unit test async Redux actions to mock ajax response
- Get the response from the dispatch - React Redux
- How to dispatch redux actions that wait for other async actions to complete?
- Redux thunk - Error ยท Actions must be plain objects. Use custom middleware for async actions even with dispatch an object with key type
- How to dispatch redux actions using react-router v4?
- React Redux how to dispatch async actions and update state
- How to dispatch actions via a timer using Redux
- How to map Multiple dispatch actions to single prop in React Redux
- How to emit two actions for ajax response in redux observable epic
- Dispatch multiple actions using Redux Thunk and the await/async syntax to track loading
- Call multiple dispatch after getting axios response Redux
- Understanding async dispatch actions using redux thunk
- Dispatch 2 actions in redux thunk
- Redux - Unable to use dispatch to call action inside of axios response
- I am unable to dispatch actions to the Redux store, when I log the `action.payload` it returned undefined
- How to use dispatch Redux actions in a separate function scripts in React?
- Dispatch multiple actions within RxJS + Redux + Axios
- How do I stop nested React components that dispatch Redux actions which update state from getting stuck in an infinite loop?
- How to dynamically switch between firebase and firestore as the database and dispatch redux actions accordingly
- Queuing Actions in Redux
- Async actions in Redux
- How to dispatch Redux action from stateless component when route is loaded?
- How to dispatch multiple actions one after another
- Testing dispatched actions in Redux thunk with Jest
- React Redux dispatch action after another action
- Call function after dispatch from redux has finished
- How to fire periodic actions using setTimeout and dispatcher in redux
More Query from same tag
- Mocha test "0 passing"
- How to render output from react-html-email using React and Webpack
- Rendering vis.js network into container via React.js
- Sublime doesn't syntax highlight React functions?
- Trouble iterating/mapping props
- How can I clear the localstorage when user close react application window?
- Why is clearTimeout not closing out timeout within closure
- reactjs .env add localhost:3000 to my axios path
- How to make dropdown to be closed only on click-outside?
- update setState with string of the key
- ReactJS Sending selection back up to parent
- Redux state updates but component state not changing from first time
- passport.authenticate("local")(req, res, function () {} block not getting executed
- Passing axios data from a utility file to a component
- How to restart an animation with saving a begin time in svg
- react does not update localstorage value based on state
- Passing values from one component to another when button is clicked-React js
- How do I toggle DOM classes in React (Material-UI)?
- Proper way to delete particular property from main state of Redux which uses combineReducers - React Redux
- Using CSSTransitionGroup on a react component is giving error
- React update state only when button is clicked rather than updating whenever something is written in input
- Error using react-update
- How to use a function within useState
- Random shuffling of tags in react
- how to properly layout main contents with Material-Ui-Next Mini variant Drawer
- Possible to render react component within mapboxgl.Popup() in .setHTML or .setDOMContent?
- How do I fix the position of an input so it's always below an element that's centered on the screen but its size can change?
- ReactJS Invalid hook call while add useStyle variable
- Issue With CDN Version of The React Bootstrap Typeahead
- Invariant violation: The title prop of a button must be a string