所以我使用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而不是客户端的其他存储方法:
非常感谢任何帮助或提示。