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

Question

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

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

我看到的一个问题是这个 reducer 会接收每个 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)
});