初識React-Redux之粗暴理解入門

權當暫記

    往後再行補充完善，如有閱讀者，請翻到下文黃色標題‘從這裏開始’起閱讀。本文以一個最簡單的demo進行註釋性理解，所有拷貝下去，就能運行的一個demo。
    Rudex在我看來最本質作的事情就是將全部的State屬性統一存儲（一個屬性就是一個註冊到store的Reducer），而後用戶觸發事件，經過Redux修改State的狀態（這裏必定記住State只有一個，惟一惟一惟一），經過State狀態影響Props狀態，Props是與視圖（JSX）直接掛鉤的，從而達到刷新渲染視圖的目的。
    而後其中的關鍵就是修改State的狀態，Redux構建出了Action,Reducer,connect(mapStateToProps,mapDispatchToProps)(component)，container等這些玩意兒搞了一套規則進行「規矩化」的修改狀態，其實也就是分工了下，分紅了幾個層級。暫且理解到這，新手學習，拙見如有誤，前端娛樂圈的朋友請不要憐惜我，評論處見。一切爲了學習進步。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// React component 視圖組件（component）的實現，定義了props（包括簡單的數值，字符串還有函數對象）
class Counter extends Component {
    render() {
        const { value, onIncreaseClick } = this.props
        return (
            <div>
                <span>{value}</span>
                <button onClick={onIncreaseClick}>Increase</button>
            </div>
        )
    }
}
 
//對props進行限定，如類型限定
Counter.propTypes = {
    value: PropTypes.number.isRequired,
    onIncreaseClick: PropTypes.func.isRequired
}

// Action 能夠看做reducer中業務邏輯的路由，在mvc裏不也是你要定義幾個接口，就寫幾個action嘛，這個徹底能夠看做把action的名稱單獨拿出來做爲一個路由的存在了，以致於這裏沒有單獨的如mvc裏的路由模塊。

const increaseAction = {
    type: 'increase'
}

1.二、 a、Reducer 定義了（初始化了）state，初始化了state（一個Reducer就是一個state裏的一個屬性，屬性類型也是這裏定義的，這個demo若是console.log(state);則結果爲state:{counter:{count:0}}

//全部註冊在store中的Reducer名稱組合起來就是全局的state對象）才能夠在下面的connect中的mapStateToProps、mapDispatchToProps中使用state
// b、Reducer 定義了一個或多個action的處理邏輯，而這多個action的處理邏輯怎麼區分的呢，是靠傳進來的參數action的一個屬性字段type進行惟一性區分（能夠將換這個type看做action之於Reducer的路由）
// c、
//這麼看，其實Reducer就至關於一個controller，裏面有多個action處理邏輯。
//好的，再回頭看provider， Provider在根組件（App）外面包了一層，這樣一來，App的全部子組件就默認均可以拿到state了。
//一結束，看二。

function counter(state = {
    count: 0
}, action) {
    const count = state.count
    switch (action.type) {
        case 'increase':
            return {
                count: count + 1
            }
        default:
            return state
    }
}

1.一、 Store 頂級，全局惟一，根據reducer生成的store「實例」，暫且只看做一個與reducer進行匹配的一種模式，不深究其做爲狀態樹什麼的地位。

//因此主要是看reducer（這裏的ruducer實例：counter）裏有什麼。

const store = createStore(counter)

2.二、 Map Redux state to component props prop對象用state的值進行操做後賦上值，這裏的state對象裏面有什麼，哪兒定義的呢？就是最上面講store的時候，store裏的reducer裏定義的。想起來了吧。

function mapStateToProps(state) {
    return { value: state.count }
}

2.三、Map Redux actions to component props事件綁定，可是呢，不直接寫邏輯，而是用dispatch與事先定義的action進行關聯。action至關於節點路由了，根據路由（action.type）在reducer（至關於controller）找到對應處理邏輯。

// 這樣一來，事先定義的action-->reducer-->store就跟咱們最頂層的dom關聯起來了。說白了就是定義了套規則，在我粗鄙的看來，也是個mvc。

function mapDispatchToProps(dispatch) {
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    }
}

2.1Connected Component 、看了這行代碼，先無論其中的參數啥意義，咱們首先了解這行代碼意義是什麼，就是前面說的關聯。

// Counter是上面定義的視圖組件，你就直接當作這個是dom，dom裏面須要顯示東西（props）跟觸發事件（函數類型props），顯示跟觸發這些東西就是定義在其中兩個參數中。
// 第一個參數mapStateToProps做用:顯示東西。簡答說就是經過state做爲輸入參數，進行一堆操做或者不操做，給props賦值（由於咱們顯示東西老是跟props關聯的）
// 第二個參數mapDispatchToProps做用：事件綁定。

const App = connect(mapStateToProps, mapDispatchToProps)(Counter)

這裏開始看起

//1、Provider是react-redux提供的，先不深究。 store實例做爲根節點元素與咱們的組件進行‘綁定’，往上看啥是strore
//2、上面說的主要是定義了一堆規則進行狀態state，action及其處理邏輯，如今要跟咱們的組件結合起來，即上面最終的處理邏輯如何關聯咱們某個dom的事件觸發（如onClick），這是咱們最關心的。
// 因此看咱們的App組件

class RudexDemo extends Component {
    render() {
        return (
            <Provider store={store}>
                <App />
            </Provider>
        );
    }
}


export default RudexDemo;

總結注意點：

一、State的初始化在哪兒呢？答案：全部的Reducer（注意是要註冊要Store上的）構成了這個State，Reducer名稱爲State屬性的名稱，Reducer中第一個參數State裏定義的參數類型就是State屬性的類型。這個很重要！
二、State是一個全局的狀態對象，這個對象是惟一的惟一的惟一的，跟component，Reducer什麼的沒有直接關聯。記住就一個State，咱們全部的操做都是爲了改變這個State裏面的部分屬性值，從而達到刷新渲染頁面的目的。
三、全部在component中須要與reducer掛鉤的事情，都經過props讓containers裏去進行調用。這樣分離合乎規矩。
原文：http://www.cnblogs.com/joeymary/p/7820047.html

我的公衆號：