I have a store with a list of items. When my app first loads, I need to deserialize the items, as in create some in-memory objects based on the items. The items are stored in my redux store and handled by an itemsReducer
.
I'm trying to use redux-saga to handle the deserialization, as a side effect. On first page load, I dispatch an action:
dispatch( deserializeItems() );
My saga is set up simply:
function* deserialize( action ) { // How to getState here?? yield put({ type: 'DESERISLIZE_COMPLETE' }); } function* mySaga() { yield* takeEvery( 'DESERIALIZE', deserialize ); }
In my deserialize saga, where I want to handle the side effect of creating in-memory versions of my items, I need to read the existing data from the store. I'm not sure how to do that here, or if that's a pattern I should even be attempting with redux-saga.
In the above example, takeEvery allows multiple fetchData instances to be started concurrently. At a given moment, we can start a new fetchData task while there are still one or more previous fetchData tasks which have not yet terminated.
Redux-Saga is one of the popular middleware libraries for Redux. It makes working with asynchronous operations and side effects a lot easier. Unlike other libraries like Redux Thunk, Redux-Saga uses ES6 generators. Therefore, you should be knowledgeable in ES6 generators to implement Sagas correctly.
takeLatest(pattern, saga, ... And automatically cancels any previous saga task started previously if it's still running. Each time an action is dispatched to the store. And if this action matches pattern , takeLatest starts a new saga task in the background.
How do I access the redux state inside a saga function? Short answer: import { select } from 'redux-saga/effects'; ... let data = yield select(stateSelectorFunction); javascript.
you can use select effect
import {select, ...} from 'redux-saga/effects' function* deserialize( action ) { const state = yield select(); .... yield put({ type: 'DESERIALIZE_COMPLETE' }); }
also you can use it with selectors
const getItems = state => state.items; function* deserialize( action ) { const items = yield select(getItems); .... yield put({ type: 'DESERIALIZE_COMPLETE' }); }
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