8.引入状态redux

redux

react-redux

安装redux

npm i redux react-redux --save

修改/app/app.js

import {Provider} from 'react-redux';
import store from './store/store';

ReactDom.render(
    <Provider store={store}>
        <BrowserRouter>
            <Route path="/" component={App}/>
        </BrowserRouter>
    </Provider>
    ,
    document.getElementById('root')
);

新建/app/store/store.js

import {createStore} from 'redux';

import user from '../component/content/content01.reducer';

const store = createStore(user);

export default store;

新建/app/component/content/content01.reducer.js

let initState = {
    data: [{
        name: 'doudou',
        age: 32,
        phone: 123456789,
        email: '123456789@163.com',
        key: 1,
    }]
};

function user(state = initState, action) {
    const data = state.data;
    switch (action.type) {
        case 'ADD_ONE_USER':
            data[data.length] = action.payload;
            return {data: data};
        default:
            return state;
    }
}
export default user;

新建/app/component/content/content01.action.js

export function addOneUser(value) {
    return {
        type: 'ADD_ONE_USER',
        payload: value
    }
}

修改/app/component/content/content01.js

import React from 'react';
import {Table, Icon, Button} from 'antd';
import {connect} from 'react-redux';
import {addOneUser} from './content01.action';
import FromContent from './FromContent';

class Content01 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            date: null
        };
        this.showModal = () => {
            this.setState({
                visible: true,
                data: new Date()
            });
        };
        this.closeModal = () => {
            this.setState({
                visible: false,
            });
        };

        this.submit = (values) => {
            values.key = Date.parse(new Date());
            this.props.addOneUser(values);
            this.closeModal();
        }
    }

    render() {
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '电话号码',
            dataIndex: 'phone',
            key: 'phone',
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        }];

        const data = this.props.data;

        return (
            <div>
                <Button type="primary" onClick={this.showModal}>
                    <Icon type="user-add"/>添加
                </Button>
                <Table columns={columns} dataSource={data}/>
                {
                    this.state.visible ? <FromContent date={this.state.date}
                                                      submit={this.submit}
                                                      showModal={this.showModal}
                                                      closeModal={this.closeModal}
                    /> : null
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        data: state.data
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        addOneUser: (value) => dispatch(addOneUser(value))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Content01);

新建/app/component/content/FromContent.js

import React from 'react';
import {Modal, Button, Form, Input} from 'antd';
const FormItem = Form.Item;
import {increaseAction} from './content01.action';

class FromContent01 extends React.Component {
    constructor(props) {
        super(props);

        this.handleSubmit = (e) => {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                    this.props.submit(values);
                }
            });
        }
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const {closeModal, date} = this.props;

        return (
            <Modal
                title="添加一个成员"
                key={date}
                visible={true}
                onCancel={closeModal}
                footer={null}
            >
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem label="姓名">
                        {getFieldDecorator('name', {
                            rules: [{required: true, message: 'Please input your name!'}],
                        })(
                            <Input placeholder="姓名"/>
                        )}
                    </FormItem>
                    <FormItem label="年龄">
                        {getFieldDecorator('age', {
                            rules: [{required: true, message: 'Please input your age!'}],
                        })(
                            <Input placeholder="年龄"/>
                        )}
                    </FormItem>
                    <FormItem label="电话号码">
                        {getFieldDecorator('phone', {
                            rules: [{
                                required: true, message: 'Please input your phone!',
                            }],
                        })(
                            <Input type="电话号码"/>
                        )}
                    </FormItem>
                    <FormItem label="邮箱">
                        {getFieldDecorator('email', {
                            rules: [{
                                required: true, message: 'Please input your email!',
                            }],
                        })(
                            <Input type="邮箱"/>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}
const FromContent = Form.create()(FromContent01);
export default FromContent;