Creates an effect that instructs the middleware to invoke the provided
selector on the current Store's state (i.e. returns the result of
selector(getState(), ...args)).
If select is called without argument (i.e. yield select()) then the
effect is resolved with the entire state (the same result of a getState()
call).
It's important to note that when an action is dispatched to the store, the middleware first forwards the action to the reducers and then notifies the Sagas. This means that when you query the Store's State, you get the State after the action has been applied. However, this behavior is only guaranteed if all subsequent middlewares call
next(action)synchronously. If any subsequent middleware callsnext(action)asynchronously (which is unusual but possible), then the sagas will get the state from before the action is applied. Therefore it is recommended to review the source of each subsequent middleware to ensure it callsnext(action)synchronously, or else ensure that redux-saga is the last middleware in the call chain.
Preferably, a Saga should be autonomous and should not depend on the Store's state. This makes it easy to modify the state implementation without affecting the Saga code. A saga should preferably depend only on its own internal control state when possible. But sometimes, one could find it more convenient for a Saga to query the state instead of maintaining the needed data by itself (for example, when a Saga duplicates the logic of invoking some reducer to compute a state that was already computed by the Store).
For example, suppose we have this state shape in our application:
state = { cart: {...} }
We can create a selector, i.e. a function which knows how to extract the
cart data from the State:
./selectors
export const getCart = state => state.cart
Then we can use that selector from inside a Saga using the select Effect:
./sagas.js
import { take, fork, select } from 'redux-saga/effects' import { getCart } from './selectors'
function* checkout() { // query the state using the exported selector const cart = yield select(getCart)
// ... call some API endpoint then dispatch a success/error action
}
export default function* rootSaga() { while (true) { yield take('CHECKOUT_REQUEST') yield fork(checkout) } }
checkout can get the needed information directly by using
select(getCart). The Saga is coupled only with the getCart selector. If
we have many Sagas (or React Components) that needs to access the cart
slice, they will all be coupled to the same function getCart. And if we now
change the state shape, we need only to update getCart.
Creates an effect that instructs the middleware to invoke the provided selector on the current Store's state (i.e. returns the result of
selector(getState(), ...args)).If
selectis called without argument (i.e.yield select()) then the effect is resolved with the entire state (the same result of agetState()call).Notes
Preferably, a Saga should be autonomous and should not depend on the Store's state. This makes it easy to modify the state implementation without affecting the Saga code. A saga should preferably depend only on its own internal control state when possible. But sometimes, one could find it more convenient for a Saga to query the state instead of maintaining the needed data by itself (for example, when a Saga duplicates the logic of invoking some reducer to compute a state that was already computed by the Store).
For example, suppose we have this state shape in our application:
state = { cart: {...} }
We can create a selector, i.e. a function which knows how to extract the
cartdata from the State:./selectorsexport const getCart = state => state.cart
Then we can use that selector from inside a Saga using the
selectEffect:./sagas.jsimport { take, fork, select } from 'redux-saga/effects' import { getCart } from './selectors'
function* checkout() { // query the state using the exported selector const cart = yield select(getCart)
}
export default function* rootSaga() { while (true) { yield take('CHECKOUT_REQUEST') yield fork(checkout) } }
checkoutcan get the needed information directly by usingselect(getCart). The Saga is coupled only with thegetCartselector. If we have many Sagas (or React Components) that needs to access thecartslice, they will all be coupled to the same functiongetCart. And if we now change the state shape, we need only to updategetCart.