Reactjs 重演传奇+；next.js：已触发操作，但无法访问存储&；冻结的 总结：

我正在尝试合并

Next.js

+

Redux saga（+combineReducer）

。应用程序已成功呈现页面，但

props.store

似乎无法访问，并且它不反映redux操作的结果

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

Next.js

官方github:

Codesandbox下一个redux传奇示例：

首先，我认为我的初始化是错误的，所以我用

with reduxsaga

尝试了不同的参数，比如

with reduxsaga（{async:true}）

，

with reduxsaga（）

，

with reduxsaga

，但都不起作用。 其次，我认为可能组件必须以类的形式提供，而不是函数的形式，所以我也以这种方式切换了文档和组件，但仍然不起作用

如果需要详细检查，我的完整代码可在此处找到：

实际代码： 减速器是通过

组合减速器

组合的，并使用我的自定义增强器

//提供redux saga存储
//pages/_app.js
从“React”导入React；
从“next/App”导入应用程序，{Container}；
从'react redux'导入{Provider}；
从“下一个redux包装器”导入withRedux；
从“下一个redux saga”导入WithRedux saga；
从“../util”导入{enhanceAll}；
从“../store”导入createStore；
导入“../styles/common.scss”；
类MyApp扩展了应用程序{
静态异步getInitialProps（{Component，ctx}）{
让pageProps={}；
if（Component.getInitialProps）{
pageProps=await Component.getInitialProps（{ctx}）；
}
返回{pageProps}；
}
render（）{
const{Component，pageProps，store}=this.props；
返回(
);
}
}
常量增强子=[withRedux（createStore），withReduxSaga]；
const enhanced=enhanceAll（MyApp，增强子）；
出口违约率提高；

//使用redux saga的自定义组件
//省略了它的目录，因为它与问题无关。
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../util”导入{enhanceAll}；
从“../store/actions”导入{addNum，subNum}；
类SagaComponent扩展了组件{
render（）{
const{dispatch，store}=this.props；
返回(
{JSON.stringify（this.props）}
分派（addNum（1））}>添加计数
调度（子num（1））}>子计数
);
}
}
常量增强子=[connect（state=>state）]；
const-enhanceAll（SagaComponent，增强子）；
出口违约率提高；

action creator和saga不包含任何特殊内容，遵循正常惯例

错误： 从redux webdev chrome扩展中我可以看到，该操作本身已正确启动，但

redux saga

并未反映该操作。另外，redux存储无法按预期工作，redux存储中的值根本不会改变

// 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;

// 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;