react与redux的简单结合_ant form 和redux-优快云博客

本文通过一个具体实例展示了如何使用Redux进行状态管理。介绍了如何定义reducer处理不同action类型、创建store并订阅状态变化，同时利用bindActionCreators将UI事件与action分发相结合。读者可以了解Redux的基本用法及组件间的状态同步。

javascript 代码

import React, {Component} from 'react';
import {createStore, bindActionCreators} from 'redux';

function reducer(state, action) {
    if (typeof state === 'undefined') return {name: '', num: 0};
    switch(action.type) {
        case 'changeName':
            return Object.assign({}, state, action.payload);
        case 'access':
            return Object.assign({}, state, {num: ++state.num});
        default:
            return state;
    }
}

const store = createStore(reducer, {name: '', num: 0});

let actions = {
    changeName(name) {
        return {
            type: 'changeName',
            payload: {name}
        };
    },
    assess() {
        return {
            type: 'access'
        };
    }
}

/*将UI事件和派发action巧妙的结合了起来*/
actions = bindActionCreators(actions, store.dispatch);

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            num: 0
        };
    }

    componentDidMount() {
        store.subscribe(() => {
            console.log(store.getState());
            /*this.setState(store.getState(), function() {
                console.log(this.state.num);
            });*/
            this.setState(function() {
                return store.getState();
            }, function() {
                /*state更新完毕后执行回调*/
                console.log(this.state.num);
            });
        });
    }

    render() {
        return (
            <div>
                <p>{this.state.name}</p>
                <p>{this.state.num}</p>
                <input type="text" onChange={(event) => actions.changeName(event.target.value)} />
                <button onClick={event => actions.assess()}>access</button>
            </div>
        );
    }
}

export default Test;