Подключите редукторные редукторы с помощью reduxform в nextjs - PullRequest
Новая
       10

Подключите редукторные редукторы с помощью reduxform в nextjs

0 голосов
/ 30 апреля 2018

Я пытаюсь скомбинировать 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)),
);

Последний рабочий пример. Я попытался объединить синтаксис с-redux-wrapper с документами reduxForm. Действие reduxForm и редуктор здесь не работают: https://github.com/neone35/rearn/blob/master/server/store.js

Как я могу объединить эти два, чтобы использовать reduxForm внутри моего компонента, содержащего компоненты Field?

1 Ответ

0 голосов
/ 30 апреля 2018

Я решил свою проблему после прочтения этой документации:

Кроме того, я вышел из консоли, чтобы посмотреть, какие реквизиты получает мой компонент, чтобы быстрее решить проблему.

Как выглядит 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)));

Я разделил все свои редукторы на функции, которые инициализируют состояние как ноль (потому что initStore получает переданные нули, а preloadedState (initialState) всегда имеет приоритет). Я возвращаю необработанное значение из создателя действия (без объекта), и оно передается прямо в combReducers (который создает объект), который rootReducer внутри createStore .

...