随着前端代码大规模复杂化，传统的服务端并不能满足我们对于前端渲染的需求，全面采用前端 React 作为我们的 UI 层面也是必然的趋势。同时，Redux 作为全局状态管理的方案，可以很好的解决复杂应用组件之间的通信问题。而在服务端渲染中，Redux 也是非常重要的一部分。
Redux 介绍
Redux 是一种 JavaScript 状态管理库，它可以帮助我们管理应用中的所有状态，包括异步行为、请求响应、路由等等。Redux 是基于一组设计模式的实现，最初用于实现 React 应用中的 Flux 架构。
Redux 的核心概念有三个：store、action、reducer。
store是唯一的数据储存容器，能够存储应用的所有状态。类似于数据库中的“表”，store 中会内置一些可以获取和储存状态的 API 用于和外界交互。action是一种声明性的描述性语言，用于描述需要进行的某个状态变更，其中必须包括与该操作相关的数据，也就是负载。reducer是一个纯函数，接收一个action和当前时刻的state，返回一个新的state。reducer 会按照特定的规则对状态进行更新或下发新的状态。
服务器端渲染
在不同的场景下，我们总是在不同的任务中进行渲染。在传统意义上的渲染是在前端，服务器端渲染则是在服务器端。服务端渲染可以带来以下的好处：
- 用户可以在没有 JavaScript 的情况下访问应用。
- 更快的首屏渲染速度，一定程度上缩短页面首次加载的时间。
- 有利于 SEO，通过服务端渲染搜索引擎可以被更好的理解页面内容及信息。
基于以上优势，我们将介绍如何在 Redux 中实现服务器端渲染。
首先，在服务器端，我们需要加载数据，然后初始化 Redux store，便于之后的数据展示与修改等行为。这些行为，包括在 store 中读取数据并渲染结果在网站页面中呈现，甚至包括 store 中的状态修改操作，都可以通过 actions 和 reducers 这两个 Redux 的特性来实现。
下面详细介绍如何在服务器端渲染中利用 Redux 进行数据管理。
创建 store
我们先在服务器端创建一个 store，并将 store 传入要进行服务端渲染的组件。
----- --------- - ----------- -- -
----- ----- - --------------------- ------------------------
----- --- - -
--------- --------------
-------------- ---------------- --
-----------
--
------ ----
--加载数据
接下来，在组件渲染前，我们可以利用 Redux 中的 dispatch 方法调用 action，获取需要在组件中使用的数据，并储存到 store 中。
----- ------------------- - ----- ------- ---------- -- - ----- ---------------- - ----------------- -- --- ----- --------------- - --------------------------- -- -------------------------- ----- ----------------------------- ------ ----------------- --
将数据传入组件
在数据获取完成后，我们通过 store 中的 getState 方法获取数据，将其传入要进行服务端渲染的组件中。这里我们使用的 React DOM 的 renderToString 方法，当然你可以使用其他库来实现服务端渲染。
----- ------- - ---------------------------------------
最后，将渲染好的页面和从 Redux 取得的数据呈现给用户。
----- ---- - ---------- -----
------
------
----- ----------------
------------ ----------- -----------------
-------
------
---- -------------------------
------- -----------------------
---------------- - ----------------------------
---------
------- ----- --------------------------
-------
---------
---------------示例代码
完整的代码可参考以下链接：
https://github.com/lmk123/redux-server-side-rendering-tutorial
在代码中，我们通过这个例子来介绍服务端渲染中 Redux 的应用。具体的实现包括：
- Next.js 搭建服务端渲染初始化框架。
- Redux 核心概念的实现，包括 Reducer 和 Action。
- 视图分类，通过 react-bootstrap 库进行页面中的组件化构造。
- 服务端渲染整个页面的渲染机制，为服务端初始化提供数据。
结论
使用 Redux 进行服务端渲染可以实现更好的数据管理和 SEO，本文介绍了 Redux 在服务端渲染中的运用，通过构造 store、加载数据、将数据传入组件以及返回组件初始化结果的方式，来实现整个服务端的渲染流程。推荐阅读 Redux 官方文档，去更好了解该库。
希望读者在这份教程中能够够学会开发与实践 Redux 在服务端渲染中的应用，且从中汲取到实践与思考的助益。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a7807d91dce0dc881f700