一咽弦、前言

? Redux三大原則: 1)單一數(shù)據(jù)源 2)State是只讀的 3)使用純函數(shù)來(lái)執(zhí)行修改及其涉及的Action郁惜、Reducer、Store等相關(guān)概念本文不再贅述寻仗，其相關(guān)概念可以查閱Redux中文官方文檔衙耕。本文主要介紹使用React-Redux完成簡(jiǎn)易計(jì)數(shù)器功能昧穿。

Redux中文文檔

二、整體架構(gòu)

??Redux分為展示型組件和容器型組件橙喘，前者從this.props獲取數(shù)據(jù)渲染界面时鸵，該組件的state是只讀的；后者通過(guò)react-redux自帶的connect方法關(guān)聯(lián)對(duì)應(yīng)的展現(xiàn)型組件實(shí)現(xiàn)數(shù)據(jù)（state狀態(tài)）的管理（基于分發(fā)Action實(shí)現(xiàn)管理）。Reducer負(fù)責(zé)根據(jù)Action的類型來(lái)修改state的值饰潜，可以通過(guò)redux自帶的combineReducers函數(shù)合并多個(gè)Reducer初坠。
??redux自帶的createStore函數(shù)通過(guò)關(guān)聯(lián)合并的Reducer得到store，react-redux自帶的Provider組件通過(guò)關(guān)聯(lián)store使得Reducer可以訪問(wèn)并修改state值彭雾。

1. Redux 入門(mén)教程（三）：React-Redux 的用法
2. 《深入React技術(shù)棧碟刺，陳屹著》

三、簡(jiǎn)易計(jì)數(shù)器實(shí)現(xiàn)

??展示型組件顯示簡(jiǎn)易計(jì)數(shù)器界面薯酝，從this.props獲取數(shù)據(jù)并渲染界面半沽。其核心代碼如下所示：

import React from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
class Counter extends Component {
    
    constructor(props) {
        super(props);
    }

    render() {
        //從this.props獲取count計(jì)數(shù)值和counterAdd 方法
        const { count, counterAdd } = this.props;
        return (
            <div>
                <button onClick={counterAdd}>計(jì)數(shù)器加一</button>
                <div>
                    <div>計(jì)數(shù)器值: {count}</div>
                </div>
            </div>
        )
    }
    //指定count為number類型，counterAdd為函數(shù)類型
    static propTypes = {
        count: PropTypes.number.isRequired,
        counterAdd: PropTypes.func.isRequired,
    }
}

export default Counter

??指定計(jì)數(shù)器增加Action蜜托，其核心代碼如下所示：

const counterAddAction = {
    type: 'counter_add'
}
export default counterAddAction

??容器型組件負(fù)責(zé)傳遞this.props值給對(duì)應(yīng)的展示型組件抄囚，其核心代碼如下所示：

import React from 'react';
import { connect } from 'react-redux'
import Counter from '../components/Counter'
import CounterAddAction from "../redux/actions/CounterAddAction ";
//建立一個(gè)從（外部的）state對(duì)象到（展示型組件的）props對(duì)象的映射關(guān)系
//counter與展示型組件同名
const mapStateToProps = state => {
    return {
        count: state.counter.count
    }
}
//建立展現(xiàn)型組件的參數(shù)到store.dispatch方法的映射
//傳遞this.props方法，執(zhí)行counterAddAction（計(jì)數(shù)器增加Action）對(duì)應(yīng)的函數(shù)
const mapDispatchToProps = dispatch => {
    return {
        counterAdd: () => {
            dispatch(CounterAddAction )
        }
    }
}
//connect方法關(guān)聯(lián)展示型組件
const CounterApp= connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter)

export default CounterApp;

??計(jì)數(shù)器關(guān)聯(lián)的reducer負(fù)責(zé)響應(yīng)Action修改state值橄务，其核心代碼如下所示：

export default function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'counter_add': return Object.assign({}, state, {
            count: state.count + 1  //計(jì)數(shù)器加一
        });
        default: return state;
    }
}

const initialState = {
    count: 0,  //count初始值
}

??合并多個(gè)Reducer的核心代碼如下所示：

import { combineReducers } from 'redux'
import CounterReducer from './CounterReducer'

const Reducers= combineReducers({
    CounterReducer, 
})
export default Reducers

??最后在index.js中使用Provider組件關(guān)聯(lián)合并的Reducer幔托，其核心代碼如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import CounterApp from './container/CounterApp'
import Reducers from './redux/Reducers'
// 通過(guò)createStore方法生成store
const store = createStore(Reducers)
ReactDOM.render(
    <Provider store={store}> //關(guān)聯(lián)store
        <CounterApp/>
    </Provider>, document.getElementById('root')
);

??最后啟動(dòng)項(xiàng)目，結(jié)果如下所示：

計(jì)數(shù)器+1結(jié)果

參考鏈接：一個(gè)簡(jiǎn)單的react-redux小demo

四蜂挪、相關(guān)依賴

??項(xiàng)目所需的依賴包括redux重挑、react-redux、prop-types棠涮，使用npm下載相關(guān)依賴即可谬哀。

npm install redux --save
npm install react-redux --save
npm install prop-types --save