0

所以我使用nextjs示例with-redux-saga来计算如何在_app.js文件中调用 store.getState componentDidMount

这是商店配置:

import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { createWrapper } from 'next-redux-wrapper'

import rootReducer from './reducer'
import rootSaga from './saga'

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

export const makeStore = (context) => {
  console.log(context, 'contextcontext')
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(rootReducer, bindMiddleware([sagaMiddleware]))

  store.sagaTask = sagaMiddleware.run(rootSaga)

  return store
}

export const wrapper = createWrapper(makeStore)

这是_app.js文件:

import { wrapper } from '../store'
import React from 'react';
import App from 'next/app';

class MyApp extends App {
  static getInitialProps = wrapper.getInitialAppProps(store => async ({Component, ctx}) => {
    return {
      pageProps: {
        ...(Component.getInitialProps ? await Component.getInitialProps({...ctx, store}) : {}),
        pathname: ctx.pathname,
        store,
      },
    };

  });


  componentDidMount() {
    // call store.getState here <======
  }

  render() {
    const {Component, pageProps} = this.props;
    return (
      <Component {...pageProps} />
    );
  }
}

export default wrapper.withRedux(MyApp);

版本:

  "dependencies": {
    "next": "latest",
    "next-redux-wrapper": "^7.0.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "7.2.0",
    "redux": "^4.1.2",
    "redux-saga": "^1.1.3"
  },

问题是当我在 componentDidMount 上记录存储时,它只显示sagaTask而不是客户端的其他存储方法:

在此处输入图像描述

非常感谢任何帮助或提示。

4

0 回答 0