@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);
````