React SSR 支持 Redux 实现

实现思路分析

1. 在实现了 React SSR 的项目中需要实现两端 Redux
2. 客户端 Redux 就是通过客户端 JavaScript 管理 Store 中的数据.
3. 服务器端 Redux 就是在服务器端搭建一套 Redux 代码, 用于管理组件中的数据.
4. 客户端和服务器端共用一套 Reducer 代码.
5. 创建 Store 的代码由于参数传递不同所以不可以共用.

实现客户端 Redux

1. 创建 Store
2. 配置 Store
3. 创建 Action 和 Reducer
4. 配置 polyfill
   由于浏览器不能识别异步函数代码, 所以需要 polyfill 进行填充.

在客户端文件夹 client 下创建 createStore 文件

// client/createStore.js
import {
    applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../share/store/reducers';

const store = createStore(reducer, {
   }, applyMiddleware(thunk));

export default store;

全局注册 store

// client/index.js
import React from "react";
import ReactDOM from "react-dom";
import {
    BrowserRouter } from "react-router-dom";
import {
    renderRoutes } from "react-router-config";
import routes from "../share/routes";
import {
    Provider } from "react-redux";
import store from "./createStore";

ReactDOM.hydrate(
  <Provider store={
   store}>
    <BrowserRouter>{
   renderRoutes(routes)}</BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

在同构文件夹 share 下创建 store 文件夹，store 包含 ation 和 reducers 文件夹，因为会有多个
创建 action ，user.action.js

// share/store/actions/user.action.js
import axios from 'axios';

export const SAVE_USER = 'save_user';

// 发送请求 获取用户列表数据
export const fetchUser = () => async dispatch => {
   
  let response = await axios.get('https://jsonplaceholder.typicode.com/users'