如何在saga函数中访问redux状态?
简短回答:
import { select } from 'redux-saga/effects';
...
let data = yield select(stateSelectorFunction);
如何在saga函数中访问redux状态?
简短回答:
import { select } from 'redux-saga/effects';
...
let data = yield select(stateSelectorFunction);
正如 @markerikson 已经说过的那样,redux-saga
提供了一个非常有用的 API select()
,用于在 saga 内部调用 selector
从 state 中获取部分数据。
对于您的示例,一个简单的实现可以是:
/*
* Selector. The query depends by the state shape
*/
export const getProject = (state) => state.project
// Saga
export function* saveProjectTask() {
while(true) {
yield take(SAVE_PROJECT);
let project = yield select(getProject); // <-- get the project
yield call(fetch, '/api/project', { body: project, method: 'PUT' });
yield put({type: SAVE_PROJECT_SUCCESS});
}
}
除了由@markerikson建议的文档外,D. Abramov还制作了一个非常好的视频教程,介绍如何在Redux中使用selectors
。同时,也可以查看Twitter上非常有趣的这个帖子。
“选择器”函数就是为此而生的。您将整个状态树传递给它们,它们返回一些状态的部分。调用选择器的代码不需要知道数据在状态中的位置,只需知道已返回数据。有关示例,请参见http://redux.js.org/docs/recipes/ComputingDerivedData.html。
在saga中,可以使用select()
API来执行选择器。
import {eventChannel} from 'redux-saga';
import {call, take} from 'redux-saga/effects';
function createEventChannel(setEmitter) {
return eventChannel(emitter => {
setEmitter(emitter)
return () => {
}
}
)
}
function* YourSaga(){
let emitter;
const internalEvents = yield call(createEventChannel, em => emitter = em)
const scopedCallback = () => {
emitter({type, payload})
}
while(true){
const action = yield take(internalEvents)
yield put(action)
}
}