我通过从 saga 调度 Action ,根据在 saga 中间件中执行的一些逻辑的结果来切换模式的可见性。
我经历了:
店铺
export default function configureStore(preloadedState) {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [..otherMiddleware, sagaMiddleware, ...someMoreMiddlewares];
const store = createStore({
// other configuration,
// middleWares
})
sagaMiddleware.run(rootRunner);
return store;
}
reducer :
const initialState = {
activeSwitch: '1',
modalVisibility: false,
}
export default function reducer(state = initialState, action) {
switch (action.type) {
case 'TOGGLE_MODAL':
return state.set('modalVisibility', !state.get('modalVisibility'));
case 'UPDATE_ACTIVE_SWITCH':
// update active switch
default:
return state;
}
}
行动 :
export const switchOption = payload => ({
type: 'SWITCH_OPTION',
payload,
})
export const toggleModal = () => ({
type: 'TOGGLE_MODAL',
})
export const updateActiveSwitch = payload => ({
type: 'UPDATE_ACTIVE_SWITCH',
payload,
})
组件 :
import switchOption from 'action';
function Component(props) {
return <div onClick={props.switchOpt(somePayloadParameter)} />;
}
const mapDispatchToProps = state => ({
switchOpt: (somePayloadParameter) => dispatch(switchOption(somePayloadParameter)),
})
export default connect(null, mapDispatchToProps)(Component);
根传奇 :
export default function* rootRunner() {
yield all([ fork(watcher) ])
}
佐贺 :
function* worker(payload) {
console.log('hey');
yield put({'TOGGLE_MODAL'})
// Perform some task and wait for modal ok button click
yield take('MODAL_OK');
if (taskSuccess) {
yield put({ type: 'UPDATE_ACTIVE_SWITCH', someValue});
yield put({ type: 'TOGGLE_MODAL'}};
}
export default function* watcher() {
while(true) {
yield actionObj = yield take('SWITCH_OPTION');
yield call(worker, actionObj.payload);
}
}
由于
watcher
的结果,从 saga 分派(dispatch)了两次“TOGGLE_MODAL”,因此模态永远不可见调用worker
两次。如果我放一个
debugger
就在 while(true) {
之后在 watcher
, 页面加载 ,该断点被击中两次。即使我从
worker
中删除每一行,它仍然运行两次。为什么我的传奇代码运行两次?
编辑
组件 :
import switchOption from 'action';
function Component(props) {
return <div onClick={props.switchOpt(somePayloadParameter)} />;
}
const mapDispatchToProps = state => ({
// switchOption is action from action.js
switchOpt: (somePayloadParameter) => dispatch(switchOption(somePayloadParameter)),
})
export default connect(null, mapDispatchToProps)(Component);
Redux 监控中间件 在调用 saga 函数时执行三个操作后,在开发工具中登录到控制台
onClick
首次:modalVisibility
设置为 true
modalVisibility
设置为 false
现在点击
div
变得无用,因为 MODAL 从未弹出,也没有 OK 按钮可以点击。
最佳答案
现在Component
正在调用props.switchOpt
每次渲染。相反,创建一个可以通过引用传递的新函数,然后使用 onClick
调用:
function Component(props) {
return <div onClick={() => { props.switchOpt(somePayloadParameter); }} />;
}
关于javascript - redux-saga:函数被调用两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55341894/