@alifd/field/demo/redux.md

Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.

---
title: redux 中使用 - with redux
order: 5
---

在 redux 中使用, 在 `componentWillReceiveProps` 更新

---

set value in `componentWillReceiveProps`

```jsx
import ReactDOM from 'react-dom';
import React from 'react';
import { Input, Button } from '@alifd/next';
import Field from '@alifd/field';
import { combineReducers, createStore } from 'redux';
import { Provider, connect } from 'react-redux';

function formReducer(state = { email: 'frankqian@qq.com' }, action) {
    switch (action.type) {
        case 'save_fields':
            return {
                ...state,
                ...action.payload,
            };
        default:
            return state;
    }
}

class Demo extends React.Component {
    componentWillReceiveProps(nextProps) {
        this.field.setValues({
            email: nextProps.email,
            newlen: nextProps.email.length,
        });
    }

    field = new Field(this, {
        onChange: (name, value) => {
            console.log('onChange', name, value);
            this.field.setValue('newlen', value.length);
            this.props.dispatch({
                type: 'save_fields',
                payload: {
                    [name]: value,
                },
            });
        },
    });

    setEmail() {
        this.props.dispatch({
            type: 'save_fields',
            payload: {
                email: 'qq@gmail.com',
            },
        });
    }

    render() {
        const init = this.field.init;

        const newLen = init('newlen', { initValue: this.props.email.length });

        return (
            <div>
                <Input
                    {...init(
                        'email',
                        { initValue: this.props.email },
                        {
                            rules: [
                                {
                                    required: true,
                                    type: 'email',
                                    message: 'at least 5 chars',
                                },
                            ],
                        }
                    )}
                />
                now length is:{newLen.value}
                <p>email: {this.props.email}</p>
                <Button onClick={this.setEmail.bind(this)}>set</Button>
            </div>
        );
    }
}

const ReduxDemo = connect((state) => {
    return {
        email: state.formReducer.email,
    };
})(Demo);

const store = createStore(
    combineReducers({
        formReducer,
    })
);

ReactDOM.render(
    <Provider store={store}>
        <div>
            <ReduxDemo />
        </div>
    </Provider>,
    mountNode
);
```