Reactjs 调度操作类型时不会触发Redux Saga

我第一次实现了Redux传奇。我按照文档创建了这个传奇

问题是在调度操作类型时，Saga没有触发。让我详细说明一下。 我有一个saga.js文件，其中包含watcher和worker传奇。root-saga.js只是结合了所有不同的传说。js文件包含sagas配置的基本设置代码

我正在组件中的useEffect调用上分派操作类型。redux开发工具显示正确调用了操作类型。请看一下代码

预期的结果是，saga应该在调度action类型函数时自动被调用。应显示相应的控制台日志

编辑1：添加操作定义代码

//store.js

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer from './reducers/root-reducer';
import rootSaga from './sagas/root-saga';

const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware];

const store = createStore(
  rootReducer,
  compose(
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(...middlewares)
  )
);

sagaMiddleware.run(rootSaga);

export default store;

//root-saga.js

import { all, call } from 'redux-saga/effects';

import { dashboardSagas } from './dashboard-sagas';

function* rootSaga() {
  yield all([call(dashboardSagas)]);
}

export default rootSaga;

//saga.js页面

import { takeLatest, put, call, all } from 'redux-saga/effects';
import axios from 'axios';

import { DASHBAORD } from '../types/dashboard';
import { DashboardSuccess, DashboardFail } from '../actions/dashboard';
import { APIS_ENDPOINTS } from '../../util/api-endpoints';

// watcher saga

export function* fetchDashboardSaga() {
  yield takeLatest(DASHBAORD.START, fetchDashboardAsyncSaga);
}

// worker saga

function* fetchDashboardAsyncSaga() {
  yield console.log('123');
  try {
    const resp = yield axios.get(APIS_ENDPOINTS.DASHBOARD);
    yield console.log(resp);
    yield put(DashboardSuccess(resp));
  } catch (error) {
    console.log(error);
    yield put(DashboardFail('Something went wrong. Please try again'));
  }
}


export function* dashboardSagas() {
  yield all([call(fetchDashboardSaga)]);
}

//app.js

import { dashboardStart } from './redux/actions/dashboard';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(dashboardStart());
  }, [dispatch]);
  return (
    // some dom
  );
}

//动作定义

import { DASHBAORD } from '../types/dashboard';

const dashboardStart = () => {
  return {
    type: DASHBAORD.START,
  };
};

const DashboardSuccess = (param) => {
  return {
    type: DASHBAORD.SUCCESS,
    payload: param,
  };
};

const DashboardFail = (param) => {
  return {
    type: DASHBAORD.FAILED,
    payload: param,
  };
};

export { dashboardStart, DashboardSuccess, DashboardFail };

---

谢谢

如果行动安排得当，那么问题在于你的传奇故事的注册。 尝试替换此代码块

函数*rootSaga{ 产生所有[calldashboardSagas]； } 与：

函数*rootSaga{ 交出全部[ //手动调用sagas。仅限watcher函数。示例： 仪表板sagas.saga1， 仪表板sagas.saga2 ]; }

---

我发现了问题。redux的store.js中的compose函数出现了一些奇怪的问题。我删除了它并安装了redux devtools扩展库。现在工作很好

   // before
   compose(
     window.__REDUX_DEVTOOLS_EXTENSION__ &&
       window.__REDUX_DEVTOOLS_EXTENSION__(),
     applyMiddleware(...middlewares)
   )

   // after
   composeWithDevTools(applyMiddleware(...middlewares))

---

我基本上是按原样使用你的代码的，而且很有效。问题出在别的地方。谢谢你的测试。我不知道这个问题还会在哪里。有什么建议吗？@MartinKadlec发现了这个问题。谢谢你的帮助