如何将react redux与next js和类组件一起使用

Question

我正试图将redux与NextJS和类组件一起使用，但不知道如何消除这个错误：

错误：找不到"存储"；在"；Connect(CounterDisplay("；。要么用<提供者>，或者在连接选项中将自定义React上下文提供者传递给，并将相应的React上下文消费者传递给Connect(CounterDisplay(。

// pages/_app.js
import '../styles/globals.css';
import 'bootstrap/dist/css/bootstrap.css';
import {Provider} from 'react-redux';
import {useStore} from '../core/redux/store';
export default function App({Component, pageProps}) {
const store = useStore(pageProps.initialReduxState);
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}

// pages/index.js
import React from 'react';
import Page from '../components/page'
import CounterDisplay from '../components/CounterDisplay';
export default function Index() {
// return <Page />
return (
<React.Fragment>
<CounterDisplay/>
</React.Fragment>
)
}

// components/CounterDisplay.js
import React from 'react';
import connect from 'react-redux/lib/connect/connect';
class CounterDisplay extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<span>{this.props.count}</span>
</div>
);
}
}

function mapStateToProps(state, ownProps) {
return {
count: state.count
}
}
export default connect(mapStateToProps)(CounterDisplay);

奇怪的是，我已经用<提供商>因此，根据错误消息，它应该可以正常工作。

编辑：

// core/redux/store
import {useMemo} from 'react';
import {createStore, applyMiddleware} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
let store;
const initialState = {
lastUpdate: 0,
light: false,
count: 0,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'TICK':
return {
...state,
lastUpdate: action.lastUpdate,
light: !!action.light,
};
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
case 'DECREMENT':
return {
...state,
count: state.count - 1,
};
case 'RESET':
return {
...state,
count: initialState.count,
};
default:
return state;
}
};
function initStore(preloadedState = initialState) {
return createStore(
reducer,
preloadedState,
composeWithDevTools(applyMiddleware()),
);
}
export const initializeStore = (preloadedState) => {
let _store = store ?? initStore(preloadedState);
// After navigating to a page with an initial Redux state, merge that state
// with the current state in the store, and create a new store
if (preloadedState && store) {
_store = initStore({
...store.getState(),
...preloadedState,
});
// Reset the current store
store = undefined;
}
// For SSG and SSR always create a new store
if (typeof window === 'undefined') return _store;
// Create the store once in the client
if (!store) store = _store;
return _store;
};
export function useStore(initialState) {
const store = useMemo(() => initializeStore(initialState), [initialState]);
return store;
}

Answer 1

在CounterDisplay组件中，您需要更改connect:的导入

import connect from 'react-redux/lib/connect/connect';

线路至：

import {connect} from 'react-redux';

如果不从插件的根文件夹导入react-redux，则它很可能看不到相同的存储。