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

问题描述

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

导出默认reducer (state = initialState, action) {案例'redux-form/CHANGE'://返回修改后的状态}

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

解决方案

你绝对可以使用 redux-form 动作创建者.您只需将其连接到您的组件即可.

所以在你的 /components/MyComponent.js

从'react'导入React；从'react-redux'导入{连接}；从'redux-form'导入{更改}；class MyComponent 扩展了 React.Component {...使成为() {返回 
<button onClick={this.props.change('formName', 'fieldName', 'value')}>更改</button>
}}const mapStateToProps = (state, ownProps) =>{ ... }export default connect(mapStateToProps, { change })(MyComponent);

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

在你的 reducers/index.js]

import { reducer as form } from 'redux-form';const 表单插件 = {表单名称:(状态，动作)=>{...减速器逻辑返回新状态；}}const rootReducer = combineReducers({...其他减速机，形式:form.plugin(formPlugin)});

What is the recommended way to handle redux-form/CHANGE actions being dispatched by redux-form? I have my own reducer managing the state of this form but I'm not sure if it's best to do the following:

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

One problem I see is that this reducer would receive every redux-form/CHANGE action. Additionally as far as I can tell ActionTypes.js isn't exported in a way for me to import it so I feel as though this may not be best practice.

解决方案

You can definitely use redux-form action creators. You just have to connect it to your component.

So in your /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);

You could also use redux-form reducer and extends it to your needs...

In your 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)
});

这篇关于如何在 reducer 中处理 redux-form/CHANGE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！