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

Question

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

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

我看到的一个问题是该减速器将执行所有 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-formreducer并将其扩展到您的需求...

在你的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)
});