redux-saga 无法捕获 store 增强器调度的动作

问题描述

我需要使用存储增强器(来自 react-redux-firebase 的 reactReduxFirebase)在我的 redux 应用程序中.这个增强器发送一个动作，它看起来或多或少是这样的(简化了很多):

I need to use store enhancer (reactReduxFirebase from react-redux-firebase) in my redux app. This enhancer dispatches an action, it looks more or less like this (much simplified):

const reactReduxFirebase = (next) => {
  return (reducer, initialState, middleware) => {
    const store = next(reducer, initialState, middleware);
    store.dispatch({
      type: 'DUMMY_ACTION'
    });
    return store;
  }
}

// usage
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
const store = createStore(
  reducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    reactReduxFirebase
  )
);
sagaMiddleware.run(sagas);

// sagas.js
function* handle(action) {
  console.log(action);
}

function* saga() {
  yield takeEvery('*', handle);
}

export default saga;

我希望 saga 监听所有动作并在 console.log 中记录它们，但它没有捕捉到由增强器发送的DUMMY_ACTION"，因为它在 saga 开始监听之前被发送 (sagaMiddleware.run(sagas);).从 redux-saga 文档看来，saga 必须在 applyMiddleware 之后运行，所以我不能让 saga 在增强器之前运行.有什么办法可以让它工作，所以传奇也会从增强器那里捕捉到一个动作吗?

I want saga to listen to all actions and console.log them, but it doesn't catch 'DUMMY_ACTION' dispatched by enhancer, because it's being dispatched before saga starts to listen (sagaMiddleware.run(sagas);). From redux-saga docs it seems that saga must be run after applyMiddleware, so I cannot make saga run before enhancer. Is there any way to make it work, so the saga will catch an action from enhancer as well?

推荐答案

基于applyMiddleware的解决方案:

import createSagaMiddleware from 'redux-saga';
import { takeEvery } from 'redux-saga/effects';
import { createStore, compose } from 'redux';
import {
  reducer
} from '../reducers';

function sagaPreinitMiddleware(saga) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const sagaMiddleware = createSagaMiddleware();

    const store = createStore(reducer, preloadedState, enhancer);
    let dispatch = store.dispatch;
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    dispatch = compose(sagaMiddleware(middlewareAPI))(store.dispatch);
    sagaMiddleware.run(saga); // run the saga
    return {
      ...store,
      dispatch
    };
  };
}

const reactReduxFirebase = (next) => {
  return (reducer, initialState, middleware) => {
    const store = next(reducer, initialState, middleware);
    store.dispatch({
      type: 'DUMMY_ACTION'
    });
    setTimeout(store.dispatch({
      type: 'DUMMY_ACTION_1'
    }), 100);
    return store;
  };
};

// usage
const middleware = [];
const store = createStore(
  reducer,
  0,
  compose(
    reactReduxFirebase,
    sagaPreinitMiddleware(sagas)
  )
);


// sagas.js
function* handle(action) {
  console.log(action);
}

function* sagas() {
  yield takeEvery('*', handle);
}

日志:

   00000000: [reducer] action Object {type: "@@redux/INIT"}
   00000008: [reducer] action Object {type: "DUMMY_ACTION"}
             Object {type: "DUMMY_ACTION"}
   00000011: [reducer] action Object {type: "DUMMY_ACTION_1"}
             Object {type: "DUMMY_ACTION_1"}

这篇关于redux-saga 无法捕获 store 增强器调度的动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！