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

时间:2016-11-19 14:27:13

标签: redux-form

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

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

我看到的一个问题是此缩减器会收到每个 redux-form/CHANGE操作。另外,据我所知,ActionTypes.js并没有以某种方式导出,因此我觉得这可能不是最佳做法。

1 个答案:

答案 0 :(得分:6)

您绝对可以使用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)
});