从零搭建一个基于React+Nextjs的SSR网站(二)：在Nextjs项目中增加react+redux

最新推荐文章于 2025-07-02 19:31:00 发布

邵天宇Soy

最新推荐文章于 2025-07-02 19:31:00 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript react Nextjs es6 node

本文链接：https://blog.youkuaiyun.com/qq_35087256/article/details/86025356

本文介绍如何在Next.js项目中添加React+Redux，通过全局容器实现状态管理，提供代码示例展示Next.js中不同于传统React项目的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客源码：https://github.com/shaotianyu/blog-front

PS: 如果你有疑惑，可以给我留言，咱们一起解决它。

从零搭建一个基于React+Nextjs的SSR网站(一)：写在前面
 从零搭建一个基于React+Nextjs的SSR网站(二)：在Nextjs项目中增加react+redux
从零搭建一个基于React+Nextjs的SSR网站(三)：在Next项目中使用markdown
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目

正文

基本的Nextjs项目构造可以参考这篇文章，写得很好也非常详细，我就不转载了：

用Next.js快速上手React服务器渲染

看完上面的这篇文章后你会搭建一个自己的本地的静态站点，并且可以运行在localhost:3000。这个时候我们就可以向这个项目上面添加React和Redux了。

与往常的react+redux项目不同的是，以往的react的组件是用Provider容器包裹起来的，可以让容器组件拿到state，比如下面这样

...
import {
   
    Provider } from 'react-redux'
import {
   
    
	BrowserRouter, 
	Route, 
	Switch
} from 'react-router-dom'
...

<Provider store={
   
   store}>
	<BrowserRouter>
		<div className="XXX">
			<Component1 />
			<Switch>
				<Route path='/path1' exact component=