如何在 reducer 中处理 redux-form/CHANGE

Question

处理由 redux-form 调度的 redux-form/CHANGE 操作的推荐方法是什么？我有自己的 reducer 来管理此表单的状态，但我不确定是否最好执行以下操作：

export default reducer (state = initialState, action) {
  case 'redux-form/CHANGE':
    // return modified state
}

我看到的一个问题是这个 reducer 会收到 every redux-form/CHANGE 动作。此外，据我所知，ActionTypes.js 并没有以我可以导入的方式导出，所以我觉得这可能不是最佳实践。

Answer 1

您绝对可以使用redux-form 动作创建者。您只需要将它连接到您的组件。

所以在你的/components/MyComponent.js

import React from 'react';
import { connect } from 'react-redux';
import { change } from 'redux-form';

class MyComponent extends React.Component {
    ...
    render() {
        return <div>
            <button onClick={this.props.change('formName', 'fieldName', 'value')}>Change</button>
        </div>
    }
}

const mapStateToProps = (state, ownProps) => { ... }
export default connect(mapStateToProps, { change })(MyComponent);

您也可以使用redux-form reducer 并将其扩展到您的需要...

在你的reducers/index.js]

import { reducer as form } from 'redux-form';

const formPlugin = {
    formName: (state, action) => {
        ...reducer logic
        return newState;
    }
}

const rootReducer = combineReducers({
    ...other reducers,
    form: form.plugin(formPlugin)
});