在当前正在进行的项目中集成redux-form

时间:2017-01-31 11:03:23

标签: javascript react-redux redux-form

我不知道如何将redux-form集成到我正在为之工作的当前项目中。

我完全不知道在项目提供的已经给定的函数减速器中集成redux-form reducer。此函数返回当前2个键:{name, model},这对应用程序很重要,无法删除。

你们中的一些人确实知道我该怎么办?

这里是我的文件:(为了简洁起见,我将它们缩短了)

myGivenReducer.js

const modelReducer = (model = {}, action = {}) => {
    switch (action.type) {
      //blah blah...
    }
}

export default function reducer(state = {}, action = {}) {
    const checkoutModel = modelReducer(state.model, action);
    return {
        name: state.name || 'unnamed',
        model: checkoutModel
    };
}

myStoreCreator.js

let data = {name, model: props};

let storeEnhancer = (process.env.NODE_ENV === 'local') ? DevTools.instrument : (() => (next) => next);

store = compose(storeEnhancer())(createStore)(myReducer, data);

contactForm.js

// exactly like redux-form tutorial sample code 
http://redux-form.com/6.5.0/docs/GettingStarted.md/

提示:

我已经尝试在reducer函数中添加一个新键{form: reduxForm},但它不起作用。

如果我使用combine reducer(下面),表单可以工作!,但键{'name','model'}不再通过应用程序传递。所以这不是一个有效的解决方案。

const combinedReducer = combineReducers({
    form: formReducer,
    model: myReducer()['model'],
    name: myReducer()['name']
})

希望你们中的一些人能给我一些想法! (事实上​​,我认为它更多是关于来自redux-form本身的Javascript。)

干杯。

1 个答案:

答案 0 :(得分:1)

尝试......

// dont forget to import the redux-form reducer
import { reducer as formReducer } from 'redux-form';

export default function reducer(state = {}, action = {}) {
  const checkoutModel = modelReducer(state.model, action);
  return {
    name: state.name || 'unnamed',
    model: checkoutModel,
    form: formReducer(state.form, action)
  };
}