reactjs - Next.js 和 redux。服务器端填充store不生效

Question

我刚刚将 redux 连接到 Next.js 应用程序 like in the docs (但不确定 mapDispatchToProps 在示例中的作用):

初始化存储方法:

import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';
import tokenMiddleware from './tokenMiddleware';
import getReducer from './combineReducers';

const logger = createLogger({ collapsed: true, diff: true });
const axiosMw = axiosMiddleware(axios.create(), { successSuffix: '_SUCCESS', errorSuffix: '_FAILURE' });

export default function initStore(logActions) {
  return function init() {
    const middleware = [tokenMiddleware, axiosMw];
    if (logActions) middleware.push(logger);
    return createStore(getReducer(), applyMiddleware(...middleware));
  };
}

我用来连接页面的 HOC:

import 'isomorphic-fetch';
import React from 'react';
import withRedux from 'next-redux-wrapper';
import { setUser } from 'lib/publisher/redux/actions/userActions';
import PublisherApp from './PublisherApp';
import initStore from '../redux/initStore';

export default Component => withRedux(initStore(), state => ({ state }))(
  class extends React.Component {
    static async getInitialProps({ store, isServer, req }) {
      const cookies = req ? req.cookies : null;
      if (cookies && cookies.user) {
        store.dispatch(setUser(cookies.user));
      }

      return { isServer };
    }

    render() {
      console.log(this.props.state);
      return (
        <PublisherApp {...this.props}>
          <Component {...this.props} />
        </PublisherApp>
      );
    }
  }
);

我遇到的问题是调度的操作

store.dispatch(setUser(cookies.user));

似乎在服务器上工作正常(我已经调试了reducer，并且我知道cookie中的这个用户对象确实是由reducer处理的)，但是当我这样做时 console.log(this.props.state)我得到具有初始状态的 reducer - 没有用户数据。

Answer 1

您在 createStore 调用中缺少第二个参数。试试这个:

export default function initStore(logActions) {
  return function init(initData) {
    const middleware = [tokenMiddleware, axiosMw];
    if (logActions) middleware.push(logger);
    return createStore(getReducer(), initData, applyMiddleware(...middleware));
  };
}

注意添加了 initData 参数及其用法。