初識React Redux之粗暴理解入門

2022-01-11 08:37:57 字數 2390 閱讀 6555

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裡去進行呼叫。這樣分離合乎規矩。

原文:

Redux之react redux簡單專案入門

注意 已經安裝了react官方腳手架 進行修改 第一步 importfrom react redux 引入react redux importstorefrom store index 作用 把store提供給所有的元件實現store共享 conststore reactdom.render doc...

DJAGO初識之request方法初識(三)

在views檢視函式中我們定義乙個login函式 注釋 我們接下來先把setting中這條出入口函式給注釋掉,在後面內容中會介紹到 我們在瀏覽器中輸入以下內容,看下get請求的具體內容到底是什麼 可以看到,get函式在這裡返回了乙個querydict.其中就包含使用者提交的資料。那麼我們怎麼獲得qu...

springcloud之eureka初識篇 集群

集群與高可用基本一致,只是將伺服器由2臺,變成了3臺,設定3臺伺服器之間相互依賴,形成乙個閉環。配置 8700向8702註冊 8701向8700註冊 8702向8701註冊,此時3臺服務剛好形成乙個閉環。設定乙個註冊服務中心的url,使用者客戶端與服務端的互動 啟動後註冊中心展現效果 此時我們發現其...