初識React Redux之粗暴理解入門

import react,  from 'react'
import proptypes from 'prop-types'
import reactdom from 'react-dom'
import  from 'redux'
import  from 'react-redux'

// react component 檢視元件（component）的實現，定義了props（包括簡單的數值，字串還有函式物件）
class counter extends component  = this.props
return (
increase
)}} 
//對props進行限定，如型別限定
counter.proptypes =

// action 可以看作reducer中業務邏輯的路由，在mvc裡不也是你要定義幾個介面，就寫幾個action嘛，這個完全可以看作把action的名稱單獨拿出來作為乙個路由的存在了，以至於這裡沒有單獨的如mvc裡的路由模組。

const increaseaction =

1.2、 a、reducer 定義了（初始化了）state，初始化了state（乙個reducer就是乙個state裡的乙個屬性，屬性型別也是這裡定義的，這個demo如果console.log(state);則結果為state:}

function counter(state = , action) 
default:
return state
}}

1.1、 store 頂級，全域性唯一，根據reducer生成的store「例項」，暫且只看作乙個與reducer進行匹配的一種模式，不深究其作為狀態樹什麼的地位。

//所以主要是看reducer（這裡的ruducer例項：counter）裡有什麼。

const store = createstore(counter)

2.2、 map redux state to component props prop物件用state的值進行操作後賦上值，這裡的state物件裡面有什麼，哪兒定義的呢？就是最上面講store的時候，store裡的reducer裡定義的。想起來了吧。

function mapstatetoprops(state) 
}

2.3、map redux actions to component props事件繫結，但是呢，不直接寫邏輯，而是用dispatch與事先定義的action進行關聯。action相當於節點路由了，根據路由（action.type）在reducer（相當於controller）找到對應處理邏輯。

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

function mapdispatchtoprops(dispatch) 
}

2.1connected component 、看了這行**，先不管其中的引數啥意義，我們首先了解這行**意義是什麼，就是前面說的關聯。

// counter是上面定義的檢視元件，你就直接看成這個是dom，dom裡面需要顯示東西（props）跟觸發事件（函式型別props），顯示跟觸發這些東西就是定義在其中兩個引數中。

// 第乙個引數mapstatetoprops作用:顯示東西。簡答說就是通過state作為輸入引數，進行一堆操作或者不操作，給props賦值（因為我們顯示東西總是跟props關聯的）

// 第二個引數mapdispatchtoprops作用：事件繫結。

class rudexdemo extends component 
}export default rudexdemo;

1、state的初始化在哪兒呢？答案：所有的reducer（注意是要註冊要store上的）構成了這個state，reducer名稱為state屬性的名稱，reducer中第乙個引數state裡定義的引數型別就是state屬性的型別。這個很重要！

2、state是乙個全域性的狀態物件，這個物件是唯一的唯一的唯一的，跟component，reducer什麼的沒有直接關聯。記住就乙個state，我們所有的操作都是為了改變這個state裡面的部分屬性值，從而達到重新整理渲染頁面的目的。

3、所有在component中需要與reducer掛鉤的事情，都通過props讓containers裡去進行呼叫。這樣分離合乎規矩。

原文：

初識React Redux之粗暴理解入門

Redux之react redux簡單專案入門

DJAGO初識之request方法初識（三）

springcloud之eureka初識篇集群

初識React Redux之粗暴理解入門

Redux之react redux簡單專案入門

DJAGO初識之request方法初識（三）

springcloud之eureka初識篇 集群

相關推薦

springcloud之eureka初識篇集群