其實很早就已經接觸react了，當時還看的是es5語法，本來js基礎就不紮實，秉著初生牛犢不怕虎的精神去看了react，結果看了雲裡霧裡，這種硬塞的知識過幾天就全忘了，過了一段時間，想著有空了，就又去看了react，這次直接看的es6語法，看完後順道看了react-redux，剛開始，很痛苦，本來react就已經不太容易理解了，再加上redux和react-redux，更加懵逼了，一個很簡單的應用還要分成action、reducer、UI元件、container元件，然後分別串聯工作，就感覺腦袋要炸了，但是跟著阮大神寫了第一個demo。

先看檔案目錄，我沒有想demo裡那樣全寫在一個檔案裡，分類可以幫助更好的理解。

1.加減計數器：先定義使用者有兩種操作，一種是加，一種是減，也就是action有兩種。

export const increaseAction = {
    type: 'increase'
}
 
export const decreaseAction = {
    type: 'decrease'
}

注意，action的type是必須的，明文規定必須要。 2.然後是reducer，reducer是收到action，然後計算得出新的state，以便讓UI元件渲染新的狀態，因為每個state對應不同的view。

const setCounter = (state = {count: 0}, action) => {
    switch (action.type) {
        case 'increase':
            return {count: state.count + 1};
        case 'decrease':
            return {count: state.count - 1}
        default:
            return state;
    }
}
 
export default setCounter;
 

reducer對action的加減操作都進行了判斷處理，然後返回新的state。 3.然後是UI元件，就是view部分。

import React, {PropTypes} from 'react';
 
class Counter extends React.Component {
    render() {
        const {value, onIncreaseClick,onDecreaseClick} = this.props,
                btnStyle = {
                    width: '110px',
                    height: '30px',
                    color: '#fff',
                    backgroundColor: 'green',
                    border: '1px solid green',
                    borderRadius: '5px',
                    cursor: 'pointer'
                },
                textStyle = {
                    fontSize: '20px'
                };
 
        return (
            <div>
                <span style={textStyle}>{value}</span>
                <br />
                <button style={btnStyle} type="button" onClick={onIncreaseClick}>Increase</button>
                 
                <button style={btnStyle} type="button" onClick={onDecreaseClick}>Decrease</button>
            </div>
        )
    }
}
 
Counter.propTypes = {
    value          : PropTypes.number.isRequired,
    onIncreaseClick: PropTypes.func.isRequired,
    onDecreaseClick: PropTypes.func.isRequired
}
 
export default Counter;
 

這裡UI元件接收了來自父元件的props，onIncreaseClick,onDecreaseClick是兩個按鈕事件，使用者點選觸發事件然後傳遞action，到container接收action。 4.container接收action，通過dispatch將action傳遞給store。

import {connect} from 'react-redux';
import Counter from '../components/Counter';
import {increaseAction, decreaseAction} from '../action/index';
 
const mapStateToProps = (state) => ({
    value: state.count
})
 
const mapDispatchToProps = (dispatch) => ({
    onIncreaseClick: () => dispatch(increaseAction),
    onDecreaseClick: () => dispatch(decreaseAction)
})
 
const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)
 
export default App;

這裡呼叫了react-redux的connect方法，用於將UI元件生成容器元件，其實就是將兩者connect連線在一起，connect需要接受兩個引數，mapStateToProps和mapDIspatchToProps。 mapStateToProps方法是講state轉成props傳給UI元件，mapDIspatchToProps是UI元件引數到store.dispatch的對映，就是接收UI元件傳入的action，最後的Counter就是UI元件。

5.最後是store的生成場所。

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import {createStore} from 'redux';
import reducer from './reducer/index';
import App from './container/App';
 
const store = createStore(reducer);
 
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

這邊createStore(reducer)將reducer傳入，這樣在action通過dispatch傳入store的時候會通過reducer處理action，從而生成相應的新的state，再讓UI元件重新渲染。

以上就是我第一個小demo，記錄我學習的腳步，有問題歡迎dalao們指出，請多關照