Redux 商店使用 nextJS 自行重置路由更改

Posted

技术标签:

【中文标题】Redux 商店使用 nextJS 自行重置路由更改【英文标题】:Redux store reset on route change on his own with nextJS 【发布时间】:2020-06-09 02:29:54 【问题描述】:

您好,我在使用 Redux 和 NextJS 时遇到问题,当我使用 API 登录我的应用程序时,我的用户信息完美地存储在 redux 存储中,感谢 reduxApiMiddleware, 但是当我重新加载浏览器或更改路线时,我的商店会回到初始状态:/。

我并没有真正找到解决这个问题的方法,我尝试使用 redux-persist 并没有任何效果

这是我的 _app.js 文件:

 // pages/_app.jsx
import React from "react";
import createStore,applyMiddleware from "redux";
import Provider from "react-redux";
import App,Container from "next/app";
import withRedux from "next-redux-wrapper";
import reducer from '../redux/reducers/index'
import  apiMiddleware  from "redux-api-middleware";
import  PersistGate  from 'redux-persist/integration/react';


/**
* @param object initialState The store's initial state (on the client side, the state of the server-side store is passed here)
* @param boolean options.isServer Indicates whether makeStore is executed on the server or the client side
* @param Request options.req Node.js `Request` object (only set before `getInitialProps` on the server side)
* @param Response options.res Node.js `Response` object (only set before `getInitialProps` on the server side)
* @param boolean options.debug User-defined debug flag
* @param string options.storeKey The key that will be used to persist the store in the browser's `window` object for safe HMR
*/

const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export function configureStore(initialState,options) 
    return createStoreWithMiddleware(reducer, initialState);
  


class MyApp extends App 
    static async getInitialProps(Component, ctx) 
        // We can dispatch from here too
        // ctx.store.dispatch(type: 'FOO', payload: 'TOTO');

        const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;

        return pageProps;
    

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

export default withRedux(configureStore)(MyApp);

要将组件或页面连接到我的商店,我就是这样做的:

export default connect(state=>state)(Register)

【问题讨论】:

您好,您的问题找到解决方案了吗? 我也有同样的问题=/ 重新加载网站时设置为初始状态是正常的。要更改路线,请使用 Link from next/link 【参考方案1】:

有几种方法可以做到这一点;

1 将用户信息写入localStorage。重新加载浏览时,我在useEfect中将数据加载回redux

2 使用 next/link

【讨论】:

使用 Next/Link 并不能解决这个问题。

以上是关于Redux 商店使用 nextJS 自行重置路由更改的主要内容,如果未能解决你的问题,请参考以下文章

如何重置 react-redux 的值?

带有 nextjs 路由的更漂亮的 url

在将 react-router 5 与 redux 7 一起使用时,react-router <Link> 在转到新路由后不会重置状态

nextjs的开发使用---引入redux状态管理

在应用程序启动时重置减速器状态,同时使用 redux-persist 保持状态

react-router-redux 5:维护导航中的商店状态历史记录