Javascript redux传奇正在阻止浏览器

我对传奇一无所知

最近，我正在为我未来的项目试验一种基础设施，包括

react-router

v4和sagas

在sagas入门教程和一些关于这个问题的调查之后，我创建了一个近似值，其想法是使每个连接到redux的组件成为它自己的“微宇宙”，并拥有它自己的减速器，当然还有它自己的sagas文件

好的，继续代码，下面是组件文件夹和src文件夹的基本结构：

src/
  +components/
    +foo-component/
      -actions.js
      -constants.js
      -defaultState.js
      -index.js
      -reducer.js
      -sagas.js
-App.js
-index.js
-rootReducer.js
-rootSagas.js
-store.js

现在，这是我的

sagas.js

文件fir

foo组件

，我正在创建worker saga和watcher saga，然后我将它们导出为数组以在

rootSagas.js

中使用：

import { put, takeEvery } from 'redux-saga/effects'
import { COUNT } from './actions'

// Worker count
function* count() {
  yield put({ type: COUNT })
}

// Watcher helloSaga
function* watchCount() {
  yield takeEvery(COUNT, count)
}

const CounterSagas = [
  count(),
  watchCount()
]

export default CounterSagas

在

rootSagas.js

文件中，我得到了这个sagas，并导出了一个入口点，它一次生成了所有sagas：

import { all } from 'redux-saga/effects'

// sagas
import CounterSagas from './components/counter/sagas'

// run all
export default function* rootSagas() {
  yield all([
    // decompose
    ...CounterSagas,
  ])
}

最后，在存储配置中启动传奇：

import { compose, applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootReducer from './rootReducer'
import rootSagas from './rootSagas'

let store
const sagaMiddleware = createSagaMiddleware()

if (process.env.NODE_ENV === 'production') {
  store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware)
  )
} else {
  store = createStore(
    rootReducer,
    compose(
      applyMiddleware(sagaMiddleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
  )
}

sagaMiddleware.run(rootSagas)

export default store
export const action = (type, payload) => store.dispatch({type, payload})

好的，我有两个问题：

计数器事件自动触发一次（而不是通过按钮触发事件）

当我触发动作计数时，浏览器会进入无限循环并被阻止：

错误：在您的一个组件中抛出了一个错误，但React不知道它是什么。这可能是由于浏览器片状。React尽其所能保留DevTools的“暂停异常”行为，这需要一些仅适用于开发模式的技巧。这些可能在您的浏览器中不起作用。尝试在生产模式下触发错误，或切换到现代浏览器。如果您怀疑这实际上是React的问题，请提交问题

我知道，这是我的经验不足，所以有人能给我一些指导吗

---

谢谢

解决了！问题出在

中间件.run（sagas）

，删除它可以完美地工作。

通过删除中间件.run（sagas），saga实际上将被禁用。事实上，问题是，当您分派操作时，它将转到saga中间件，在中间件中，我们使用put方法（在watch之后）而不是分派，这将导致无限地分派相同的操作。这个问题可以通过在takeEvery方法的第一个参数中重命名action类型或saga action类型来解决，它们不应该是相同的！！像这样：

 // Watcher helloSaga
function* watchCount() {
  yield takeEvery(A_COUNT, count)
}