在 nextjs 中使用 reduxform 连接 redux reducer答案

【问题标题】：Connect redux reducers with reduxform in nextjs在 nextjs 中使用 reduxform 连接 redux reducer
【发布时间】：2018-04-30 14:09:10
【问题描述】：

我正在尝试将 reduxForm 与我在 nextjs 中的自定义减速器结合起来，但没有运气。我将其用作初始工作示例：https://github.com/zeit/next.js/blob/master/examples/with-redux-wrapper/store.js

当我根据他们的文档添加 reduxForm 时，我得到错误：Cannot read property 'source' of undefined，这意味着商店甚至不存在。

我的store.js 现在的样子：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { reducer as formReducer } from 'redux-form';
import thunkMiddleware from 'redux-thunk';
import axios from 'axios';
import getRootUrl from '../lib/api/getRootUrl';

const initialState = {
  user: 0,
  agent: 0,
};

export const actionTypes = {
  FETCH_USER: 'FETCH_USER',
  USER_AGENT: 'USER_AGENT',
};

// REDUCERS
const authReducer = (state = { user: 0 }, action) => {
  switch (action.type) {
    case 'FETCH_USER': return { user: action.payload };
    default: return state;
  }
};
const agentReducer = (state = { agent: 0 }, action) => {
  switch (action.type) {
    case 'USER_AGENT': return { agent: action.payload };
    default: return state;
  }
};

// ACTIONS
export const fetchUser = () => async (dispatch) => {
  const ROOT_URL = getRootUrl();
  const resUser = await axios.get(`${ROOT_URL}/api/current_user`);
  dispatch({ type: actionTypes.FETCH_USER, payload: resUser.data });
};

export const getUserAgent = () => async (dispatch) => {
  const ROOT_URL = getRootUrl();
  const resAgent = await axios.get(`${ROOT_URL}/api/useragent`);
  dispatch({ type: actionTypes.USER_AGENT, payload: resAgent.data });
};

const rootReducer = combineReducers({
  authReducer,
  agentReducer,
  formReducer,
});

export const initStore = (newState = initialState) => createStore(
  rootReducer,
  newState,
  compose(applyMiddleware(thunkMiddleware)),
);

最后一个工作示例。我尝试将 with-redux-wrapper 语法与 reduxForm 文档结合使用。 reduxForm action 和 reducer 在这里不起作用：https://github.com/neone35/rearn/blob/master/server/store.js

如何将这两者结合起来在包含 Field 组件的组件中使用 reduxForm？

【问题讨论】：

现在如果我单独使用reducer，例如只使用'authReducer'而不是rootReducer，它可以完美运行。怎么了？ pastebin.com/TMEAgmTM

标签： reactjs redux redux-form nextjs

【解决方案1】：

在阅读了更多此文档后，我解决了我的问题：

另外，我已经注销了控制台，以查看我的组件正在接收哪些道具来更快地解决问题。

我的store.js 现在的样子：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { reducer as formReducer } from 'redux-form';
import thunkMiddleware from 'redux-thunk';
import axios from 'axios';
import getRootUrl from '../lib/api/getRootUrl';

const initialState = {
  user: '0',
  agent: '0',
};

export const actionTypes = {
  FETCH_USER: 'FETCH_USER',
  USER_AGENT: 'USER_AGENT',
};

// REDUCERS
const authReducer = (state = null, action) => {
  switch (action.type) {
    case actionTypes.FETCH_USER:
      return action.payload || false;
    default:
      return state;
  }
};

const agentReducer = (state = null, action) => {
  switch (action.type) {
    case actionTypes.USER_AGENT:
      return action.payload || false;
    default:
      return state;
  }
};

export const rootReducer = combineReducers({
  user: authReducer,
  agent: agentReducer,
  form: formReducer,
});

// ACTIONS
export const fetchUser = () => async (dispatch) => {
  const ROOT_URL = getRootUrl();
  const resUser = await axios.get(`${ROOT_URL}/api/current_user`);
  dispatch({ type: actionTypes.FETCH_USER, payload: resUser.data });
};

export const getUserAgent = () => async (dispatch) => {
  const ROOT_URL = getRootUrl();
  const resAgent = await axios.get(`${ROOT_URL}/api/useragent`);
  dispatch({ type: actionTypes.USER_AGENT, payload: resAgent.data });
};

export const initStore = (newInitialState = initialState) =>
  createStore(rootReducer, newInitialState, compose(applyMiddleware(thunkMiddleware)));

我将所有 reducers 分成将状态初始化为 null 的函数（因为 initStore 被传递为零，而 preloadedState (initialState) 总是有优先事项）。我从 action creator （没有对象）返回原始值，它直接传递给 combineReducers （创建对象），它是 rootReducer 内部>createStore。

【讨论】：