0

我的项目正在使用 react,redux,next.js && next-redux-wrapper

我对下一个 js很陌生，我必须使用 next-redux-wrapper 将 redux 商店包装在整个应用程序中

一切都按预期工作，但我在控制台上收到警告。

有没有办法在下一个应用程序上使用全局 redux 商店而不会导致此警告上升？

react-dom.development.js:67 Warning: Using UNSAFE_componentWillReceiveProps in strict mode 
is not recommended and may indicate bugs in your code.
 See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change,
 refactor your code to use memoization techniques
 or move it to static getDerivedStateFromProps.

 Learn more at: https://reactjs.org/link/derived-state

Please update the following components: withRedux(MyApp)

_app.js

import '../styles/globals.css';

import type { AppProps } from 'next/app';
import Layout from '../components/Layout';
import { wrapperStore } from '../redux/store';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default wrapperStore.withRedux(MyApp);

store.js

import { applyMiddleware, createStore } from 'redux';

import { HYDRATE } from 'next-redux-wrapper';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createWrapper } from 'next-redux-wrapper';
import rootReducer from '.';
import thunk from 'redux-thunk';

const initialState = {};
const middleware = [thunk];

const isDefined = (object) => {
    if (object !== null) {
        return true;
    } else {
        return false;
    }
};

const updateState = (previousState, newState) => {
    newState = newState.authReducer;
    previousState = previousState.authReducer;
    const auth_token = previousState.auth_token;
    const isUserAuthenticated = previousState.isUserAuthenticated;
    const loggedUserDetails = previousState.loggedUserDetails;

    if (isDefined(auth_token)) newState.auth_token = auth_token;
    if (isDefined(isUserAuthenticated)) newState.isUserAuthenticated = isUserAuthenticated;
    if (isDefined(loggedUserDetails)) newState.loggedUserDetails = loggedUserDetails;

    return newState;
};

const wrappedReducer = (previousState, action) => {
    if (action.type === HYDRATE) {
        const newState = { ...action.payload };

        updateState(previousState, newState);
        return newState;
    } else {
        return rootReducer(previousState, action);
    }
};


const makeStore = () => createStore(wrappedReducer, initialState, composeWithDevTools(applyMiddleware(...middleware)));

export const wrapperStore = createWrapper(makeStore, { debug: true });
4

0 回答 0