在Next.js中引入Redux|第一篇

前言

春节在家里做了一点关于Next.js的工作，由于知识点比较多，空余写作时间比较零碎，我决定采用系列文的形式对所有知识点进行回顾总结，争取一篇文章讲明一个点，本篇要讲的是如何通过React高阶组件在Next.js项目中引入Redux。

背景

背景没什么好说的，Next.js作为React的一个前后端同构框架，在应用中引入Redux是一个常见的需求（阅读本文前应对Next.js前后端渲染的流程以及Redux基本用法有一定了解），使用常规方法引入Redux会产生一个问题：当服务端接收到请求后，Next会先后在服务端、前端各生成一个store，由于两个store没有进行数据同步，前端渲染时会报错。

解决思路

在服务端渲染的过程中完成store的初始化，并将初始化的store返回前端，供前端使用，即可保证前后端store数据一致性。 工作流程如下：

由于store不能被序列化，HTML不能直接携带store返回前端，只能先取出初始化后的store的state，随HTML回传到前端后，前端再利用此state创建store，以此保证前后端store一致性。具体的实现会在代码中进行讲解。

实现

首先安装两个包，redux和react-redux
redux就是redux本体
react-redux是redux的官方react连接库

代码

store.js

创建一个createMyStore模块，此模块的作用是创建store，用户传入一个InitialState，它返回一个store

import {
    createStore } from 'redux'

const ADD = 'add';

const defaultState = {
   
    counter: 28
}

function reducer(preState, action) {
   
    switch (action.type) {
   
        case ADD:
            return {
   
                ...preState,
                counter: preState.counter+