NextJS使用Redux

import React, { useEffect } from "react";
import { connect } from "react-redux";
import * as actions from "../store/actions/counter";
import makeStore from "../store";

function Page({ number, increase, decrease, asyncIncrease, asyncDecrease }) {
  return (
    <div>
      <h1>{number}</h1>
      <p>
        <button onClick={asyncDecrease}>异步减</button>
        <button onClick={decrease}>减</button>
        <button onClick={increase}>加</button>
        <button onClick={asyncIncrease}>异步加</button>
      </p>
    </div>
  );
}

function mapState(state) {
  return {
    number: state.counter
  };
}
function mapDispatch(dispatch) {
  return {
    increase() {
      dispatch(actions.increase());
    },
    decrease() {
      dispatch(actions.decrease());
    },
    asyncIncrease() {
      dispatch(actions.asyncIncrease());
    },
    asyncDecrease() {
      dispatch(actions.asyncDecrease());
    }
  };
}

const Wrapper = connect(mapState, mapDispatch)(Page);

export default Wrapper;

export async function getServerSideProps() {
  console.log('getServerSideProps');
  const store = makeStore();
  await store.dispatch(actions.asyncIncrease());
  // 仓库有数据了
  return {
    props: {
      _initialState: store.getState()
    }
  };
}

创建仓库函数

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducers";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import isBrowser from "../util/isBrowser";

let store;

/**
 * 创建仓库的函数
 * 该函数保证，如果是服务器端，每一次调用产生一个新的仓库
 * 如果是客户端，每一次调用返回同一个仓库
 * @param {*} initialState 仓库的初始值
 */
export default function(initialState) {
  if (isBrowser()) {
    //客户端
    if (!store) {
      store = create(initialState);
    }
    return store; //返回已有仓库
  }
  return create(initialState);
}

function create(initialState) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunk))
  );
}