javascript - 来自 redux-saga 的 Saga 被忽略，只使用 reducer

Question

此处 redux-saga 有问题。我正在调用 toggleSidebar() 来打开/关闭侧边栏。这行得通，但是，传奇被忽略了。我在我的 reducer 和 saga 中使用 console.log 登录到控制台，但只有 reducer 登录到控制台。

侧边栏打开/关闭，但为什么 saga 被忽略了？

/sagas/templateSaga.js - Does not log to the console

import { FETCH_DEFAULT_TEMPLATE, RECEIVE_DEFAULT_TEMPLATE } from '../actions'

function* toggleSidebar(action) {
  console.log("Called toggleSidebar in Saga")
  yield put({type: 'TOGGLE_SIDEBAR', data: action.payload});
}


export default function* templateSaga() {
  yield takeLatest("TOGGLE_SIDEBAR", toggleSidebar);
}

/reducers/templateReducer.js - Logs to the console

export default (state = initialState, {type, data = ""}) => {
  switch (type) {
    case TOGGLE_SIDEBAR: {
      console.log("Called toggleSidebar in reducer");
      return {...state, collapsed: data}
    }
    default: {
      return {
        ...state
      }
    }
  }
}

/actions/index.js

export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
export const toggleSidebar = data => ({type: TOGGLE_SIDEBAR, data})

/reducers/index.js ( rootReducer )

import templateReducer  from './templateReducer'

export default combineReducers({
  templateReducer
})

/sagas/index.js ( rootSaga )

import templateSaga from './templateSaga'

export default function* rootSaga() {
  yield all([
    ...templateSaga
  ])
}

我的商店是这样配置的:

import createSagaMiddleware                      from 'redux-saga'
import rootReducer     from '../modules/reducers'
import rootSaga from '../modules/sagas'

const sagaMiddleware    = createSagaMiddleware(rootSaga);

const middleware = [
  sagaMiddleware,
  routerMiddleware(history)
]

export const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
)
sagaMiddleware.run(rootSaga)

最后，在我的应用程序中，我正在使用:

const mapStateToProps = state => ({
  template: state.templateReducer
})
const mapDispatchToProps = dispatch =>
    bindActionCreators({ toggleSidebar }, dispatch)


export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

错误可能在 /sagas/index.js ( rootSaga ) 尝试将 ...templateSaga 更改为 fork(templateSaga)，如下所示:

import { fork } from 'redux-saga/effects'
import { templateSaga } from './templateSaga'

export default function* rootSaga() {
  yield all([
    fork(templateSaga)
  ])
}

并将export default function* templateSaga更改为

export function* templateSaga() {
  yield takeLatest("TOGGLE_SIDEBAR", toggleSidebar);
}

此外，您在 /sagas/templateSaga.js 中有某种循环，您可以在其中获取 'TOGGLE_SIDEBAR' 并立即分派(dispatch)相同的类型