首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带Redux - store的NextJS在初始化后为空

是因为在Next.js中,每个页面都是一个独立的模块,它们在服务器端和客户端上都有自己的状态。当页面刷新或导航到新页面时,Redux store会被重新初始化,因此在页面初始化后,Redux store是空的。

为了解决这个问题,可以通过在Next.js中使用Redux Persist来持久化Redux store。Redux Persist是一个用于持久化和恢复Redux store的库,它可以将Redux store的状态保存到本地存储中,并在页面刷新或导航时自动恢复。

下面是一些解决方案和相关资源:

  1. 使用Redux Persist:可以通过在Redux中使用Redux Persist来持久化store。它可以将store的状态保存到本地存储中,例如localStorage或sessionStorage,并在页面刷新或导航时自动恢复。
  2. 使用Next.js的getInitialProps方法:在Next.js中,可以使用getInitialProps方法来在服务器端获取数据并传递给页面组件。你可以在getInitialProps方法中初始化Redux store,并将初始状态作为props传递给页面组件。这样,在页面初始化后,Redux store就会包含初始状态。
  3. 使用Next.js的getServerSideProps方法:类似于getInitialProps方法,getServerSideProps方法也可以在服务器端获取数据并传递给页面组件。你可以在getServerSideProps方法中初始化Redux store,并将初始状态作为props传递给页面组件。这样,在页面初始化后,Redux store就会包含初始状态。
  4. 使用Next.js的useEffect钩子:在客户端渲染的情况下,可以使用React的useEffect钩子来初始化Redux store。在useEffect钩子中,你可以检查Redux store是否为空,并在为空时进行初始化。这样,在页面初始化后,Redux store就会包含初始状态。

总结起来,为了解决带Redux - store的NextJS在初始化后为空的问题,可以使用Redux Persist、Next.js的getInitialProps方法、getServerSideProps方法或React的useEffect钩子来初始化Redux store并保持状态的持久化。这样,页面初始化后,Redux store就会包含初始状态。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

手把手带你用next搭建一个完善react服务端渲染项目(集成antd、redux、样式解决方案)

复制代码 引入 react-redux yarn add react-redux 然后_app.js 中用这个库提供 Provider 包裹在组件外层 并且传入你定义 store import...store重新初始化这个行为要一致。...服务端解析过拿到 store 以后,直接让客户端用服务端解析值来初始化 store。 总结一下,我们目标有: 每次请求服务端时候(页面初次进入,页面刷新),store 重新创建。...首先我们改造一下 store/store.js,不再直接暴露出 store 对象,而是暴露一个创建 store 方法,并且允许传入初始状态来进行初始化。...// 服务端渲染和客户端路由跳转时会被执行 // 所以非常适合做redux-store初始化 withReduxApp.getInitialProps = async ctx => {

5.4K10

Dva 底层是如何组织起 Redux 数据流

Dva 是什么 dva 首先是一个基于redux[1]和redux-saga[2]数据流方案,然后为了简化开发体验,dva 还额外内置了react-router[3]和fetch[4],所以也可以理解为一个轻量级应用框架...可以看下这个redux entry[5]例子,除了 redux store 创建,中间件配置,路由初始化,Provider store 绑定,saga 初始化,还要处理 reducer,...使用 connect-react-router 和 history 初始化 router 和 history // 通过添加 redux 中间件 react-redux-router,强化了 history...use、model 和 start 三个接口 通过 start 方法完成 store 初始化 models 和 effects 封装,收集并运行 sagas 运行所有的 model.subscriptions..._history = patchHistory(history); }, }; 其中 initialReducer 和 setupMiddlewares 初始化 store 时调用,然后才调用

1.4K10
  • React服务端渲染与同构实践

    最近刚好实现了个基于 React&Redux 同构直出应用,赶紧写个文章总结总结压压惊。 前言 了解实践过程之前,让我们先明白几个概念(非新手可直接跳过)。...SSR 同构也是 Node 这门服务端语言兴起后,使得 JS 可以同时运行在服务端和浏览器,使得同构价值大大提升: 提高代码复用率 提高代码可维护性 基于 React&Redux 考虑 其实 Vue...和 React 都提供了 SSR 相关能力,决定在做之前我们考虑了一下使用哪种技术栈,之所以决定使用 React 是因为对于团队来说,统一技术栈可维护性上显得比较重要: 已有一套基于 React...这里稍微要提一下是,我最初设计时候想尽可能不破坏团队现有的编码习惯,像 location、cookie 之类这些模块方法每次请求过来时候,拿到值应该是不一样,如何实现这一点是参考 TSW...后续思考 可以看齐 Nextjs 这整个设计其实把构建能力抽象出来,钩子可配置化后,就可以成为一个直出框架了。当然也可以像 Nextjs 那样实现一些 Document 等组件来使用。

    79830

    React服务端渲染与同构实践

    最近刚好实现了个基于 React&Redux 同构直出应用,赶紧写个文章总结总结压压惊。 前言 了解实践过程之前,让我们先明白几个概念(非新手可直接跳过)。...SSR 同构也是 Node 这门服务端语言兴起后,使得 JS 可以同时运行在服务端和浏览器,使得同构价值大大提升: 提高代码复用率 提高代码可维护性 基于 React&Redux 考虑 其实 Vue...和 React 都提供了 SSR 相关能力,决定在做之前我们考虑了一下使用哪种技术栈,之所以决定使用 React 是因为对于团队来说,统一技术栈可维护性上显得比较重要: 已有一套基于 React...HTML 文本API; Redux 提供了一套将 reducers 同构复用解决方案; 方案与实践 首先先用脚手架生成了基于 React&Redux 异步工程目录: - dist/ # 构建结果...后续思考 可以看齐 Nextjs 这整个设计其实把构建能力抽象出来,钩子可配置化后,就可以成为一个直出框架了。当然也可以像 Nextjs 那样实现一些 Document等组件来使用。

    1.1K10

    造一个 redux-thunk 轮子

    解耦 上面的代码很多业务里非常常见,常见到我们根本不需要什么 redux-thunk,redux-saga 来处理。...这样 “函数式套娃” redux 很多轮子中都出现过,对造轮子有很大作用,希望大家可以对此有个印象。...后为返回中间件部分 交给下一个中间件处理 fetchUserById 函数里 dispatch 工作是要分发 action,要这个 action 是要走完所有中间件流程,而不是传给下一个中间件处理...函数 发现直接赋值是个很笨行为,比较高级是使用中间件来改写 dispatch 函数 最后,我们做了一个中间件出来,就叫做 redux-thunk 总结 最后来回答一些我 redux 社区里看到一些问题...目前来说,redux-thunk, redux-saga 以及 redux-loop 是比较常用 “pattern 解析器”,他们自己都提供了一套属于自己 pattern,让开发者自己框架里随意

    74130

    Nextjs任意组件数据加载

    而React单向数据流让组件与组件之间没有直接沟通方式,规范化从技术层面就被强化,进而才会产生了_Redux_、_Flux_这一类按照“分-总-分”模式(实际上就是一个消息总线模式)去控制模块间沟通...架构上这叫“样板式代码”,架构设计者应当尽量将这些代码通过“分层”方式放到一个地方去处理。 所以有理由为_Nextjs_./pages之外组件实现ssr数据异步加载。...客户端执行过程 初始化页面时(首次打开页面): _app constructor() _app render() _page constructor() _page render() 客户端首次打开页面时...实现 了解_Nextjs_解执行过程之后实现需求就很简单了——先通过_document或_appgetInitialProps()方法完成数据组装,然后将数据传递给对应组件即可。...当然传递数据方式不仅仅局限于ReactContext特性,换成Redux或全局管理数据方法都是可行

    5.1K20

    vue结合vuex实现购物车

    redux构造store有些许不同,不过原理都是一样。...我们通过state属性向容器中塞入了一个carlist数组,通过mutations告诉容器根据相应指令修改carlist,getcatlist指令获取远程数据更新冰箱中carlist,这里注意一个细节...操作storestate时我们一般不会直接触发mutation,而是通过触发action,然后action中触发mutation,action内部是可以进行异步操作,而mutation则不能。...前面数据初始化时,获取远端数据,然后为每个商品添加了checked属性,这个属性只能由前端应用来控制,不必和远端同步,而商品其他属性,如数量如果修改需要和远端更新,所有实现了俩个action。...我们需要一个变量来和这个复选框绑定,并且这个变量是根据所有商品是否都被选中计算出来,这就需要判断商品是不是都被选中了,所以我们定义store时候,getter中设置了一个叫做isall属性,看一下这部分代码

    2.3K30

    fish redux 个人理解

    就目前flutter页面 如果把每一个widget都放到一个dart文件中,阅读源码以及后续维护上都是非常困难一件事,使用fish redux就可以打破这种局面,页面中每个Component 都单独出来...fish redux 怎么用 理解fish redux组成 模块名称 作用 store 根据继承关系而来状态树 state 保存页面状态(例如 主题色) Action 动作...看图理解 :上图是example一个项目结构图,立体画出来理解起来更容易一点 global store,里边保存了 根状态 ,这个根状态目前只有主题颜色 ,state树 store 一个 修改主题...action 一个执行修改主题Reducer list页面继承了根state, 同时有自己状态 toDos【ListView中数据】,数据展示流程是,effect中执行页面初始化 Lifecycle.initState...初始化数据A,通过执行动作initToDosAction,传递数据A修改state中todos 返回新状态【更新状态≈更新页面视图】, 紧接着页面加载时候state中toDos不为加载出来想要展示数据

    1.5K30

    Redux介绍及源码解析

    同时 Redux 利用纯函数简单明了特点, Flux 架构基础上进行了优化和功能增强 (支持中间件、异步等), 降低了复杂度, 同时还提供强大工具库支持 (React-ReduxRedux-Toolkit...具体 middleware 介绍时再详细说明. 2、 State集中管理着 Redux所有状态, 可以使用 store.getState 来获取当前状态....Store 就是为了达到此目的而生, 通过 createStore 方法生成 store 实例, 然后就可以各个组件中使用实例相应方法.const store = createStore(rootReducer...${randomString()}`,}2、createStore代码中引用 store 就是通过该函数创建了, 是 Redux核心函数, 函数中对主要功能函数进行定义, 并对一些属性进行初始化...组件可以有多个Store有唯一DispatcherState是可变, 未做保护Store中执行状态更新不支持异步操作Redux单向数据流函数式编程Flux架构具体实现无技术栈限制只有一个Store

    2.5K20

    我是这样 React 中实践 TDD 编程

    Redux中编写测试听起来肯定有悖直觉。如果你使用了Redux,它可能看起来更加复杂。 然而,添加功能之前编写测试有助于编写更好代码,因为你预先考虑了将使用设计模式、体系结构和变量名称。...准备好mock适配器后,我们就可以专注于初始化存储和并编写测试了。 编写测试 这是最有趣部分。让我们开始TDD。 首先,让我们创建并配置存储。src目录中,创建一个名为index.js新目录。..., }); 编写 userSlice “slice”是应用程序中单个特性Redux reducer逻辑和动作集合,通常定义单个文件中。...slice默认状态应该是一个数组,毕竟,我们处理是用户。 让我们通过编写一个测试: src/store中创建一个名为slices新目录。...在这个目录中,添加一个名为user.test.js文件。这个文件将包含我们将为userSlice编写测试。 第一个测试是确保存储是或未定义

    1.9K30

    React进阶(3)-上手实践Redux-如何改变store数据

    前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store数据当中,已经知道组件怎么获取store数据,并渲染到页面上,那么该节当中揭示怎么更改store数据,实现页面的更新...reducer函数接收第二个参数action就是接下来要干的事情了 Redux中为了能够查看store各个状态,chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...浏览器里添加redux-devtools,创建storecreateStore()第二个参数中添加redux-devtools插件配置,使浏览器支持Redux查看store各种状态 const...最后组件中如何感知到store变化,实现数据同步更新呢,redux中,需要在组件内constructor或者componentWillMount,componentDidMount函数中进行触发...,在上文当中都有与之对应操作和解释 用几句简单话:概括下使用Redux流程 安装redux,然后从redux中引入createStore这个方法,并调用它,从而创建store, 紧着创建reducer

    2.6K30

    Dapp 前端工具: Drizzle Store

    drizzle store 主要目的是提供一个可用 redux store 版本,可以通过配置来管理所有与 web3 实例、合约实例、事件、交易和调用相关事情。...合约列表:drizzle 合约数组 Redux store 选项(Options):用于配置 drizzle store 其中加粗 React 组件中会用到属性。...创建一个 truffle 项目并部署合约 首先,目录中创建一个项目“drizzle-example”,用truffle init来实例化这个项目。...> npm i web3 @drizzle/store redux react-redux redux-logger --save client/src drizzle 和 components...应用程序与 drizzle store 建立链接 首先,我们将把 redux-logger 中间件添加到存储中,它将被提供给 drizzle 实例,然后使用我们 drizzleContext.js 文件中构建

    1.3K20

    Redux开发实用教程

    可以看到,整个流程中数据都是单向流动Redux和Flux对比 Redux是Flux思想一种实现,同时又在其基础上做了改进。...Redux中没有Dispatcher:它使用StoreStore.dispatch()方法来把action传给Store,由于所有的action处理都会经过这个Store.dispatch()方法,所以...Redux只有一个Store:Flux中允许有多个Store,但是Redux中只允许有一个,相较于多个StoreFlux,一个Store更加清晰,并易于管理; Redux和Flux最大不同是Redux...不能这样使用 Object.assign(state, { visibilityFilter: action.filter }),因为它会改变第一个参数值。你必须把第一个参数设置为对象。...比如,支持 Promise middleware 能够拦截 Promise,然后为每个 Promise 异步地 dispatch 一对 begin/end actions。

    1.4K20

    React进阶(3)-上手实践Redux-如何改变store数据

    撰文 | 川川 前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store数据当中,已经知道组件怎么获取store数据,并渲染到页面上,那么该节当中揭示怎么更改store数据...reducer函数接收第二个参数action就是接下来要干的事情了 Redux中为了能够查看store各个状态,chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...浏览器里添加redux-devtools,创建storecreateStore()第二个参数中添加redux-devtools插件配置,使浏览器支持Redux查看store各种状态 const...,以及action抽离出去 如果一上来就拆分,各个文件之间进行切换,对于初学者,是很容易绕晕.当然如果你是大神,就另当别论了 上面的代码是次要,重要是理清Reduxstore,React...结语 本文并不是什么高大上内容,主要是对学习Redux一个小小初探,真正实际项目中,复杂度远不止像这样一个例子,但是作为入门,todolist确实能让自己对Redux有一定认识 也许你会觉得这么个简单例子

    2.2K20

    精读《React 多态性》-文章底部有惊喜

    读完文章才发现,文章标题改为 Redux 多态性更妥当,因为整篇文章都在说 Redux,而 Redux 使用场景不局限于 React。...store 树,而且是一个新对象。...同样, Redux 代码中常用 Object.assign 也有这个问题: 因为新对象以 {} 对象作为最初状态,js 引擎会为新对象创建 Empty Shape,这与原对象 Shape 一定不同...作者描述性能问题是引擎级别的 Shapes 优化问题,读过上篇精读就很容易知道,只有相同初始化方式对象才被 js 引擎做优化,而 Redux 频繁生成 immutable 全局 store 是否能被优化呢...通过最近两篇精读分析,我们需要重新思考这样做带来优缺点,因为 js 环境中,Object.assign 优化效率比 Immutablejs 库更低。

    33220

    fish_redux使用详解---看完就会用!

    这图语雀上调了半天,就在上面加了个自己github水印地址 [fish_redux流程] 通过俩个流程图对比,其中还是有一些差别的 redux里面的store是全局。...,相应枚举字段,会在combineEffects中被调用,在这里,我们就能写相应方法处理逻辑,方法中俩个参数:action,ctx action:该对象中,我们可以拿到payload字段里面,action...== null) { ///这地方判断是必须,判断第一次store对象是否为 newState.store = appState.store;...,不然子模块引用该实体下字段会报指针 abstract class GlobalBaseState{ StoreModel store; } class GlobalState implements...和view,所以其它模块代码也不重复贴出了 state 因为是用中间实体,所以clone方法里面必须将实现store字段加上,不然会报指针 class CountState implements

    2.7K43

    使用 React Hooks 代替 Redux

    使用 React Hooks 代替 Redux 注:此文章立场不表示 Hooks 可以完全代替 Redux。因为 Redux 还有其他适用场景和功能,只是大部分场景可以用 Hooks 代替。...我最初学 React 时候,原于成熟方案、同事推荐,是直接和 Redux 一起学习并且上手开发。当时我就在想:React 为什么不能自己实现类似 Redux 那样数据处理功能呢?...依赖注入,而是用 useContext redux action 之后改变视图本质上还是 state 注入方式修改组件内部 state,而 hooks 则是一对一数据触发 hooks reducer..., Layout 中我们引入「组合 Provider」, 提供「统一仓库数据提供」能力,让子 UI 组件能获取 store 数据。...: store 拓展情况下,这个代码很可能出现 代码嵌套地狱,类似这样: ... // 多个 store 实例情况 import One from'.

    1.6K10

    React SSR 简介与 Next.js 使用入门

    数据获取 next 中有一个 getInitialProps 方法,它在初始化组件 props 属性时被调用,而且只服务端运行,没有跨域限制。...hook,它是默认程序一个工具函数,实际开发中可能并不会用到; 普通 React + redux 项目中,一般会使用 react-redux 库。...第一次渲染时候,withRedux 会把初始化 store 作为服务端渲染初始化数据,之后会把 store 迁移到了客户端,由客户端来维护。...也就是说之后状态变化都发生在客户端,服务端只做初始化 Redux Store 工作。...关于 next.js 内容就说到这里,如果想要更深入了解 next.js 可以进入官网阅读官方文档:https://nextjs.org/

    9.7K51
    领券