Question

摘要：

我正在尝试合并Next.js + Redux-saga(+combineReducer)。该应用程序成功呈现了页面，但props.store似乎无法访问，并且没有反映出 redux操作的结果。

我从这些资源中获取了示例（可能是我在网上找到的唯一的真实代码示例）：

Next.js官方github：https://github.com/zeit/next.js/tree/canary/examples/with-redux-saga
Codesandbox next-redux-saga示例：https://codesandbox.io/s/y16j84949?from-embed

首先，我认为初始化错误，因此我尝试使用withReduxSaga，withReduxSaga({ async: true})，withReduxSaga()等不同的参数，但没有一个起作用。其次，我认为也许必须以 class 形式提供组件，而不是 function 形式，所以我也以这种方式切换了文档和组件，但仍然没有工作。

如果需要详细检查，可以在这里找到我的完整代码： https://codesandbox.io/s/next-redux-saga-5twxj

实际代码：

reducer 通过withReduxSaga组合，并使用我的自定义 enhancer

combineReducer

// custom enhancer - util.js
const enhanceAll = (head, targets) => targets.reduce((ac, cv) => cv(ac), head);

// reducer is combined via combineReducers - in root reducer
const rootReducer = combineReducers({
  count: countReducer,
});

// store/index.js
import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';

import rootReducer, { exampleInitialState } from './reducers';
import rootSaga from './sagas';

const bindMiddleware = middleware => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

function configureStore(initialState = exampleInitialState) {
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(
    rootReducer,
    initialState,
    bindMiddleware([sagaMiddleware]),
  );

  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
}

export default configureStore;

// providing the redux-saga store
// pages/_app.js
import React from 'react';
import App, { Container } from 'next/app';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';
import { enhanceAll } from '../util';

import createStore from '../store';

import '../styles/common.scss';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ ctx });
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;

    return (
      <Container>
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    );
  }
}

const enhancers = [withRedux(createStore), withReduxSaga];
const enhanced = enhanceAll(MyApp, enhancers);
export default enhanced;

动作创建者和 saga 不包含任何特殊内容，遵循常规约定。

错误：

从 redux webdev chrome扩展中可以看到，该动作本身已正确触发，但// custom component using redux-saga // omitted its directory because it is irrelevant to the problem. import React, { Component } from 'react'; import { connect } from 'react-redux'; import { enhanceAll } from '../util'; import { addNum, subNum } from '../store/actions'; class SagaComponent extends Component { render() { const { dispatch, store } = this.props; return ( <div> <span>{JSON.stringify(this.props)}</span> <button onClick={() => dispatch(addNum(1))}>add count</button> <button onClick={() => dispatch(subNum(1))}>sub count</button> </div> ); } } const enhancers = [connect(state => state)]; const enhanced = enhanceAll(SagaComponent, enhancers); export default enhanced;不能反映该动作。此外， redux存储区无法正常工作， redux存储区中的值完全不变。

redux-saga + next.js：触发了操作，但存储无法访问并冻结

摘要：

实际代码：

错误：

0 个答案: