我正在尝试将reduxForm与我的自定义Reducer结合在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 action和reducer在这里不起作用:https://github.com/neone35/rearn/blob/master/server/store.js
如何将这两者结合使用包含Field组件的组件中的reduxForm?
答案 0 :(得分:0)
我在阅读了更多此文档后解决了我的问题:
此外,我已注销控制台,以查看我的组件正在接收哪些道具以更快地解决问题。
我的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)));
我将所有 reducer 分离为将状态初始化为null的函数(因为 initStore 传递零,而 preloadedState(initialState)总是有优先)。我从动作创建者(没有对象)返回原始值,然后直接传递给 combineReducers (创建对象) rootReducer createStore 强>