主页 / 问题 / 1388456
Accepted
Алексей Яковлев
Asked:2022-08-08 22:38:29 +0000 UTC2022-08-08 22:38:29 +0000 UTC

连接 redux 和 nextjs 时出错

  • 772

我这样连接：

import '../styles/styles.sass';
import type { AppProps } from 'next/app';
import { applyMiddleware, createStore } from 'redux';
import allReducers from '../redux/allReducers';
import { Provider, useDispatch } from 'react-redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import React from 'react';
import { useRouter } from 'next/router';
import { auth } from '../actions/userActions';
import { IMessage } from '../interfaces';

const store = createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)));

const MyApp = ({ Component, pageProps }: AppProps) => {
    const router = useRouter();
    const dispatch = useDispatch();
    const [message, setMessage] = React.useState<IMessage>({
        type: "", text: ""
    });
    const [load, setLoad] = React.useState(true);

    React.useEffect(() => {
        dispatch(auth(router, setMessage, setLoad));
        // eslint-disable-next-line
    }, [router]);

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

export default MyApp

错误：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
redux

1 个回答

  1. Best Answer

    商店移动到一个单独的文件：

    import { applyMiddleware, createStore } from 'redux';
import allReducers from '../allReducers';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(allReducers, composeWithDevTools(applyMiddleware(thunk)));

export default store;

    连接包next-redux-wrapper

    _app.tsx：

    import '../styles/styles.sass';
import type { AppProps } from 'next/app';
import React from 'react';
import { useRouter } from 'next/router';
import { auth } from '../actions/userActions';
import { IMessage } from '../interfaces';
import store from "../redux/store/store";
import { Provider, useDispatch } from "react-redux";
import { createWrapper } from "next-redux-wrapper";

const MyApp = ({ Component, pageProps }: AppProps) => {
    const router = useRouter();
    const dispatch = useDispatch();
    const [message, setMessage] = React.useState<IMessage>({
        type: "", text: ""
    });
    const [load, setLoad] = React.useState(true);

    React.useEffect(() => {
        dispatch(auth(router, setMessage, setLoad));
        // eslint-disable-next-line
    }, [router.asPath]);

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

const makesStore = () => store;
const wrapper = createWrapper(makesStore);

export default wrapper.withRedux(MyApp);

    • 0

相关问题