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

Question

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

确切地说，我不知道将 redux 形式化简器集成到项目提供给我的已经给定的功能化简器中。此函数返回当前 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
    };
}

我的商店创建者.js

let data = {name, model: props};
let storeEnhancer = (process.env.NODE_ENV === 'local') ? DevTools.instrument : (() => (next) => next);
store = compose(storeEnhancer())(createStore)(myReducer, data);

联系表格.js

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

提示：

我已经尝试在减速器功能中添加一个新的键{form: reduxForm}，但它不起作用。

如果我使用组合化简器（下图），表单可以工作！，但键{'name','model'}不再通过应用程序传递。所以这不是一个有效的解决方案。

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

希望你们中的一些人可以给我一些想法！（事实上，我认为它更多的是关于Javascript的，来自redux-form本身。

干杯。

Answer 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)
  };
}