Mark’s answer is correct. Middleware executes those instructions. But this makes your life easier: in the test, you can provide whatever you want as the argument to next(), and the generator function will receive it as a result of yield. This is exactly what saga middleware does (except that it actually fires up a request … Read more
I don’t know why you absolutly want a stateless component, while a stateful component with componentDidMount would do the job in a simple way. Dispatching actions in mapDispatchToProps is very dangerous and may lead to dispatching not only on mount but whenever ownProps or store props changes. Side effects are not expected to be done … Read more
One possible solution, as you already mentioned, is to use channels. Here is an example that should work in your case: import { channel } from ‘redux-saga’ import { put, take } from ‘redux-saga/effects’ const downloadFileChannel = channel() export function* loadFile(id) { … const download = RNFS.downloadFile({ … // push `S_PROGRESS` action into channel on … Read more
Though @Martin Kadlec’s solid answers covers the question, I want to elaborate a bit more on the details and differences on takeEvery and takeLatest and when they might be used so you can derive the possible use-cases of them. TLDR: You can use takeEvery when the returns of all previous tasks are needed. For example … Read more
Version using react-redux hooks: You can even cut out the connect function completely by using useDispatch from react-redux: export default function MyComponent() { useFetching(fetchSomething); return <div>Doing some fetching!</div> } with your custom hook import { useDispatch } from ‘react-redux’; const useFetching = (someFetchActionCreator) => { const dispatch = useDispatch(); useEffect(() => { dispatch(someFetchActionCreator()); }, []) … Read more
You will have to use selectors for that. I’ll give a simple example. Create a file selectors.js and add the fields you want to select from your store, as shown below. export const username = (state) => state.user.name; Then in your saga, import the selectors as, import * as selectors from ‘./selectors’; and when you … Read more
Redux used to be great but if you have tried none of them, I would highly recommend using Redux-Toolkit. The only case where I may want you to stick to redux is when you’re using class-based components, where Redux Toolkit does have some boilerplate (like Redux) and you may miss out decent support. However with … Read more
One way to look at it is to see your saga’s as a Graph. ‘fork’ creates a child from the calling process. While ‘spawn’ creates a new child at the root of the graph. So when you ‘fork’ another process, the parent process will wait until the ‘forked’ process is finished. Also every exception will … Read more
In my view middleware will be the best option. You can do something like this const checkTokenExpirationMiddleware = store => next => action => { const token = JSON.parse(localStorage.getItem(“user”)) && JSON.parse(localStorage.getItem(“user”))[“token”]; if (jwtDecode(token).exp < Date.now() / 1000) { next(action); localStorage.clear(); } next(action); }; You have to then wrap it in applyMiddleware
How to create rootSaga? According to a core developer of redux-saga [1,2] the idiomatic way to create rootSaga is to use the all Effect Combinator. Also, please note that yielding arrays from sagas is deprecated. Example 1 You could use something like this (+all) import { fork, all } from ‘redux-saga/effects’; import firstSaga from ‘./firstSaga’; … Read more