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(
    
        
            
        
    
    ,
    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: '[email protected]',
        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 (
            
{ this.state.visible ? : null } ) } } 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 (
            
                
{getFieldDecorator('name', { rules: [{required: true, message: 'Please input your name!'}], })( )} {getFieldDecorator('age', { rules: [{required: true, message: 'Please input your age!'}], })( )} {getFieldDecorator('phone', { rules: [{ required: true, message: 'Please input your phone!', }], })( )} {getFieldDecorator('email', { rules: [{ required: true, message: 'Please input your email!', }], })( )}
) } } const FromContent = Form.create()(FromContent01); export default FromContent;

你可能感兴趣的:(8.引入状态redux)