react redux 個人基本配置 使用心得

2021-08-18 15:47:04 字數 2793 閱讀 4926

redux  

個人心得

第一步:

在index.js 裡面

importreact from

'react'

importfrom

'react-dom'

importfrom

'react-redux'

importconfigurestore from

'./store/configurestore'

這個檔案裡面其實是配置

資料store

匯出的其實是乙個函式

importhello from

'./containers/hello'

引入元件

conststore = configurestore()

因為匯出的是函式所以加括號()

render(

store

=>

引用上面的元件

,document.getelementbyid(

'root'))

第二步:

開啟store配置檔案

importconfigurestore from

'./store/configurestore'

找到並且開啟這個檔案

配置store的檔案⬇⬇

importfrom

'redux'

importfrom

'redux'

資料集合

importuserinfo from

'./userinfo'

使用者資訊的資料

constrootreducer = combinereducers()

export default functionconfigurestore(initialstate) ⬇⬇

importuserinfo from

'./userinfo'

接著分析下,開啟這個使用者資料規則⬇

⬇⬇constinitialstate = {}  定義所有的初始化狀態在這裡

例如:使用者資訊資料,管理員資料...輪播資料

export default functionuserinfo(state = initialstate

, action)

}最後開啟 hello元件

importreact from

'react'

importfrom

'react-redux'

importfrom

'redux'

使用者資料集的actions 方法函式

import*asuserinfoactions from '../actions/userinfo'  得到的是乙個物件方法 userinfoactions.abc  這樣的

importa from

'../components/a'

importb from

'../components/b'

importc from

'../components/c'

classhelloextendsreact.component

/>

userinfo

=/>

actions

=/>)}

5.生命週期函式,載入完成的時候觸發函式

傳的乙個json 過去 action方法集合的login

componentdidmount() )}}

functionmapstatetoprops(state)

}7. userinfoactions是action方法裡面的

functionmapdispatchtoprops(dispatch)

}export defaultconnect(

mapstatetoprops

,1. 把props屬性值塞到 hello元件裡

mapdispatchtoprops

)(hello)

2. 然後這個hello元件就可以獲取 store資料⬇⬇

⬇開啟action方法,其實就是一堆函式方法

export functionlogin(data)

}只要觸發了action方法就會改變資料 傳送給計算規則

就是userinfo,傳的物件,json action.type

然後執行mapstatetoprops(state)對映,就顯示了

export functionupdatecityname(data)

}會點php的前端小渣渣

2018、4、12

Ant testng selenium基本配置

ant 配置 1 在工程根目錄下新增 build testng xslt.xml 2 新建lib目錄,新增xml檔案裡的jar包 3 新建res目錄,新增testng results.xsl 檔案 build外掛程式美化報包需要 testng.xml檔案也放置在根目錄 報告目錄,工程 report ...

create react app腳手架基本配置講解

或者直接設定npm的預設倉庫 npm config set registry 首先初始化乙個專案 下面就專案目錄結構進行分析 1 專案目錄下面的public和src目錄下的index檔案必須存在且不能修改名稱 其他的檔案可以刪除和修改名稱,因為webpack只會編譯src目錄下面的檔案,所以專案中需...

webpack學習之webpack基本配置

壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變,自動重新整理頁面 由於外掛程式可以攜帶引數 選項,必須在 webpack 配置中,向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...