I have an async call in a middleware that looks like this:
myApi.postToResource(info).then((response) => {
window.open(response.url);
}).catch((error) => {
// Handle error
});
next(action);
I have a feeling that I should be dispatching an action instead of straight doing window.open(url), but I don't know at which point I should be opening the URL. I don't think it should be in a reducer, so trying to wonder where that should happen.
Related
I am trying to implement redux-saga action dispatch functioning like Automated Re-fetching in the redux toolkit.
When opening the app, I dispatch some actions to fetch data from the server and update the redux store. When the user stays background and re-enters the app, depending on how long users stay long inactive, then the app would re-dispatch the action to fetch data from the server again. I can save the timestamp whenever fetching from the server and compare the time of the moment of switching from inactive to active. But if there is a well-already-made feature provided, I would definitely want to use that!
There are some libraries like saga-query that do similar thing for you as rtk-query, but as far as I can tell this lib specifically doesn't support refetch on focus out of the box.
Without any lib, it could be implemented like this:
import {delay, put, call, takeEvery, takeLeading, fork} from 'redux-saga/effects';
// Utility function to create a channel that will receive a message
// every time visibility changes
const createVisibilityChannel = () => {
return eventChannel((emit) => {
const handler = () => void emit(!document.hidden);
document.addEventListener('visibilitychange', handler);
return () => document.removeEventListener('visibilitychange', handler);
});
};
// Works as takeLeading except it ignores actions for extra additional time
const takeLeadingWithDelay = (ms, pattern, saga, ...args) => {
return takeLeading(pattern, function* (action) {
yield call(saga, ...args, action);
yield delay(ms);
});
};
// Root saga
function* appSaga() {
// Creates visbility channel
const visibilityChannel = yield call(createVisibilityChannel);
// Limits time between refetches for 1 minute
yield takeLeadingWithDelay(60000, 'FETCH_DATA', fetchData);
// Dispatches fetch action every time page becomes visible
yield takeEvery(visibilityChannel, function* (visible) {
if (visible) yield put({type: 'FETCH_DATA'});
});
// Fetches data on app start and starts the first timer
yield put({type: 'FETCH_DATA'})
}
// Example fetching function
function* fetchData() {
const response = yield fetch(
'https://api.spacexdata.com/v3/launches?limit=5',
);
const data = yield response.json();
console.log({data});
}
This solution assumes that the delay timer isn't specific to the page blur/focus but any refetches including the one on page focus, since in the opposite case I am not sure what the logic for the timer should be when the user switches to page too early.
guys
Like in the subject is there a solution to wait until dispatch action is finished and then dispatch another?
Do I need thunk?
dispatch(someAction());
when someAction is finished dispatch anotherAction()
dispatch(anotherAction());
It really depends on the action. Normal non-thunk actions are synchronous, so in the next line after the dispatch, the first action will already be 100% handled.
If you are dispatching thunk actions there, you can either await or .then(..) the value that is returned by dispatch.
To elaborate on the idea of #phry.
I use redux-toolkit and have this as an example thunk:
export const EXAMPLE_THUNK = createAsyncThunk(
"group/event/example_thunk",
async () => {
// Just resolves after 2 seconds.
return await new Promise((resolve) => setTimeout(resolve, 2000));
}
);
To dispatch another action after the first dispatch, you can simply await the first dispatch. In my example I updated the loading state.
Although this example works, I am not 100% sure this is the best design pattern out there. Many examples I have seen is updating the state is some dispatch has been resolved! Personally I think this is a more clear way of writing my code
const handleChangeStatus = async () => {
setIsLoading(true);
await dispatch(EXAMPLE_THUNK())
// Or dispatch something else.
setIsLoading(false);
};
From the tutorial located here, I have a question regarding this section of the code:
export function fetchPosts(subreddit) {
// Thunk middleware knows how to handle functions.
// It passes the dispatch method as an argument to the function,
// thus making it able to dispatch actions itself.
return function (dispatch) {
// First dispatch: the app state is updated to inform
// that the API call is starting.
dispatch(requestPosts(subreddit))
// The function called by the thunk middleware can return a value,
// that is passed on as the return value of the dispatch method.
// In this case, we return a promise to wait for.
// This is not required by thunk middleware, but it is convenient for us.
return fetch(`https://www.reddit.com/r/${subreddit}.json`)
.then(
response => response.json(),
// Do not use catch, because that will also catch
// any errors in the dispatch and resulting render,
// causing an loop of 'Unexpected batch number' errors.
// https://github.com/facebook/react/issues/6895
error => console.log('An error occured.', error)
)
.then(json =>
// We can dispatch many times!
// Here, we update the app state with the results of the API call.
dispatch(receivePosts(subreddit, json))
)
}
}
Let's assume I wanted to use the async/await syntax instead of the "then" syntax, how would I get the error object if something fails?
e.g.
let response = await fetch(`https://www.reddit.com/r/${subreddit}.json`)
let json = await response.json();
I can surround these lines of code with a try/catch, but the author has a stern warning not to use catch here (refer to snippet above).
So is there a proper way to use the async/await pattern with this code?
In the link you provided the note to avoid using catch is regarding the promise .catch statement. This is because it would catch errors in both the then blocks. Instead of just errors caused via fetch or response.json() it would also catch errors caused via dispatch(receivePosts(subreddit, json))
You should be able to use async await as you describe in your post whilst avoiding catching errors caused by dispatch. e.g.
export function fetchPosts(subreddit) {
return async function (dispatch) {
dispatch(requestPosts(subreddit));
let response;
let json;
try {
response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
json = await response.json();
} catch(e) {
// handle fetch or json error here e.g.
dispatch(receivePostsError(subreddit, e.message));
}
if (json) {
dispatch(receivePosts(subreddit, json));
}
}
}
I'm using redux-thunk and I also want to dispatch some actions with timeout. Because of some reasons (i want all timeouts in an object, i want to able to cancel them, doesnt really matter now) I want to have custom 'timeout middleware' and 'action enchancer'
enchancer just emits special type of action:
const addTimeoutToAction = (delay, action) => ({
type: 'TIMEOUT'
, delay
, action
})
middleware just catches it and should dispatch action after timeout ends
({dispatch, getState}) => next => action => {
if (action && action.type === 'TIMEOUT') {
setTimeout(() => {
dispatch(action.action);
}, action.delay)
}
next(action);
}
So my expectation is that dispatch function in the middleware will send action back to the middleware chain, where it will start to go through all again.
My example code works with plain action, however thunked action is not. please help me understand how to reroute delayed action back to middleware chain.
Example code:
http://codepen.io/Fen1kz/pen/zKadmL?editors=0010
You code should look like this
const action3 = () => (dispatch, getState) => {
dispatch({
type: 'action3'
});
}
Whenever you use thunk middleware, you MUST call dispatch to dispatch actions, you cannot return an object.
Here is the corrected codepen: http://codepen.io/anon/pen/pEKWRK?editors=0010
Hope this helps.
I want to use only React, React Redux, React Router and Redux Thunk.
I want to navigate to a dashboard page when a successful user creation action is dispatched. Here is my async action creator,
export function createUser() {
return dispatch => {
dispatch(creatingUser());
return axios.post('/api/users').then(() => {
// how to navigate to dashboard after this action is dispatched?
dispatch(createdUser());
});
};
}
Can you show me exactly where is the place I should naviage programmatically?
Initially looking, I would hope that "createdUser" returns a promise (like #idbehold asked previously)
in a nutshell, something like this.
// make sure your function createdUser returns a promise
function createdUser() {
return new Promise((resolve, reject) => {
//simulate some api request
setTimeout( () =>{
// api resolves. in the .then() do:
resolve()
}, 4000)
})
}
// the dispatch will forward resolution of the promise ahead into the
// .then.. then you can redirect.
dispatch(createdUser()).then( ()=> {
console.log("NAVIGATING AWAY")
//browserHistory.push('/some/path')
//assuming you are importing browserHistory
})
I hope I was helpful, if not :-( , perhaps I didn't fully understand what your need is/was. Let me know, and I'll try to help further.