score:0
it's been a while since i worked with sagas but here is some code that will give you a general idea how to wait for a dispatched action.
the way it works is that when you fetch and want to wait for it to fail or succeed you give the fetch action an id, then you can pass that to the waitfor function while simultaneously dispatch the action.
if you don't want or need to wait for it then you can just dispatch the action without an id and it'll still work:
const addid = (id => fn => (...args) => ({
...fn(...args),
id: id++,
}))(0);
const withid = ({ id }, action) => ({ action, id });
function* waitfor(id) {
const action = yield take('*');
if (action.id === id) {
return action;
}
return waitfor(id);
}
function* globalsearchrequestsaga(action) {
const { query } = action;
console.log(
`searching subscriptions and users for : ${query}`
);
try {
//add id to action (id is unique)
const action = addid(fetchusersrequest, query);
//dispatch the action and then wait for resulting action
// with the same id
yield put(action);
const result = yield waitfor(action.id);
// call for the subscriptions (leaving it out for simplicity in this example)
yield put(globalsearchsuccess(query));
} catch (error) {
console.log(`error: ${error}`);
yield put(globalsearchfailure(error.message));
}
}
export function* fetchusersrequestsaga(action) {
const { query } = action;
const path = `${root}/users`;
try {
const users = yield axios.get(path, {
crossdomain: true,
});
yield put(//add original id to success action
withid(action, fetchuserssuccess(query, users.data))
);
} catch (error) {
console.log(`error : ${error}`);
yield put(
withid(//add original id to fail action
action,
fetchusersfailure(query, error.message)
)
);
}
}
score:2
the put
function is a non-blocking action. it won't wait till the promise/api request resolves.
i would suggest you to just call sagas directly instead of dispatching actions.
try {
yield call(fetchusersrequestsaga, query);
yield call(globalsearchsaga, query); // or whatever its called
}
call
is a blocking action. it will wait until the request finishes, so both if your calls will execute in proper order.
Source: stackoverflow.com
Related Query
- Call two different action types from one redux-saga
- How to call two APIs inside redux action where one API call depends upon what was returned from the other?
- Handling Redux Saga result in view from which action call originates
- React Typescript distinguish between different prop types, choosing from one of two types
- Displaying more than one record from different API Call using React Redux
- React/Redux - Passing JSON data from one API call to another Redux action using Thunk
- is there a way to call another action from one action in react redux
- Calling an action from a different reducer with React and redux
- Redux ToolKit: is it possible to dispatch other actions from the same slice in one action created by createAsyncThunk
- Redux - how to call an action creator from inside another action creator?
- Cannot call one action from another in a React-Redux app
- What are the different types of props can be send from one component to the other using properties in React?
- How to migrate api call wrapper from a redux thunk to redux saga
- Call reducer from a different slice Redux Toolkit
- Redux saga not listening to action triggered from icon click
- How to return the data in one function call for two different object keys
- React with Redux Saga - How to get data back from axios call
- Switching between two different prop types in one React component
- Calling one redux action from one store slice in another store slice
- How can I get all sibling components to correctly re-render when dispatching a redux action from one sibling component?
- in React, I call two lists to page from mongo and I want to click one to filter what is shown in other
- Update redux state in two places with one action
- How can I synchronize data from two different queries, where one is being transformed in useEffect?
- Merge two arrays of different objects into one array of objects combined from the first two
- How to call a function from different component using React with Redux Form?
- Redux saga how to stop action from further propagating
- Dispatching an action from an asynch call in Redux
- React Redux how to use one reducer for two similar actions in two different components?
- How can i call this action from my saga generator function?
- Call a method inside Promise.all from Redux Saga
More Query from same tag
- Dynamic Add / Remove of Dropdown in ReactJS
- React-google-maps + redux - InfoWindow on marker click
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- Reactjs how to use useEffect to handle many changes to useState
- React Native, change React Navigation header styling
- My React list item components don't render one at a time
- How can you render a react component using dynamic name?
- Input not re-rendering onChange with hooks
- How do I use React 15.5 with TypeScript?
- How to call onEnter function on Route in React Router Multiple times
- Enzyme - Firing an event in an element that's passed as a prop
- ReactJS align material-ui elements horizontally
- EventEmitter.prototype in reactjs, this.on is not working and says it's not a function
- why my custom hook is executed twice when I use it once?
- Can not understand context of this in the code example
- How to solve this exception Unexpected token < in JSON at position 0?
- Warning: Failed value type: The value `isRequired` is marked as required in `Select`, but its value is `undefined`
- React, Redux - redirect after object is created (using new object id in URL)
- After running npm i --save react-router-dom i am getting error
- elements are not identified by React wrapper for intro.js
- useHistory function in ReactJS
- Adding barchart into tooltip of scatterChart in nvd3 - react component not rendering
- Property '' does not exist on type '' - despite having interface
- Enable only year in Material-UI DatePicker with react
- Error: 'TypeError: ReactWrapper can only wrap valid elements' when using enzyme.mount
- how to initialize the redux form dynamically
- How do you test the functionality of less CSS with Jest?
- Losing useState Value on Refresh in React.js
- How to conditionally lazy load dynamic imports in react?
- How to setup Router link in Reactjs