Question

在我以前的项目中，src目录中有一个rootSaga.js，代码如下：

import { all, fork } from 'redux-saga/effects'
import { cubeSagas } from 'cubeBoco'

export default function* root() {
   yield all(
     cueSagas.map(saga => fork(saga))
   )
}

如何在反应样板（https://github.com/react-boilerplate/react-boilerplate）中实现它

谢谢！

Answer 1

您可以按照与应用程序其余部分相同的方式将其添加到App / index.js中

import { compose } from 'redux';
import injectSaga from 'utils/injectSaga';
import saga from './saga';

function App() {
  return (
    <div>
      <Switch>
      <Route exact path="/" component={HomePage} />
      </Switch>
      <GlobalStyle />
    </div>
  );
}
const withSaga = injectSaga({ key: 'global', saga });

export default compose(withSaga)(App);

Answer 2

使用新的redux-hooks，您必须： 1）将减速器添加到全局reducer.js文件中：

export default function createReducer(
  injectedReducers = {},
) {
  const rootReducer = combineReducers({
    global: globalReducer,
    router: connectRouter(history),
    ...injectedReducers,
  });

  return rootReducer;
}

2）从全局reducer导入saga.js和reducer.js，并为key提供与全局reducer.js中的reducers名称相同的名称：

import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import reducer from '../global/reducer';
import saga from '../global/sagas';
const key = 'global';

3）将其注入您的功能组件中：

  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

对我有用。可以在多个路由中使用它，即使用相同全局传奇和reducer的不同页面。最好的问候。

反应样板rootSaga

2 个答案: