來自乙個react SPA的總結 redux篇

2021-07-13 19:53:33 字數 2015 閱讀 3619

本文是自己這幾天做乙個reactspa的其中之一篇總結,主要總結在實踐中,學習到的有關redux的一些思想(並沒有太多細節),方便日後自己的重溫……..

redux用作管理應用的data-state和ui-state,在react中元件間的通訊一般是parent-child間,(兄弟間鑑於我初出茅廬,暫時沒遇到),而對於子元件向父元件傳遞資料,想想都有點難以想象,所以redux很好地解決了這些問題,redux提供了store用來儲存自己的應用中所有的state,換句話說就是作為中間的媒介,使得各元件可以通過它來處理別的元件的state,看下圖

1.在乙個應用中它只有乙個store**

2.不能直接處理state,處理state的唯一辦法就是宣告乙個action,它描述了state的處理方式,並將它作為store的dispatch方法呼叫的乙個引數:store.dispatch(action)

可以通過action create方式來呼叫action

3.reducer通過recive乙個state並返回乙個新的state來達到更改state的意圖,所以在這裡請注意,reducer並不是改變原先state,而是通過返回給store乙個新的state,來實現相關元件state的改變

4.通過createstore來建立乙個store並把reducer傳入給它,下面以乙個簡單的一段**,整合上面的知識

const initial =

var reducer = function(state = initial, action)

return state;

} var store=createstore(reducer);

store.disptach()

在這裡reducer被呼叫了兩次,一次是在建立store後,另一次是在dispatch乙個action後。

第一次,建立store後立即呼叫reducer,並使用了initial作為state的初始值;

第二次,在dispatch乙個action後,reducer通過type知道怎樣改變state

使用combinereducer來整合多個reducer,然後傳給store,因為乙個應用中只有乙個store哦,不能對每乙個reducer建立乙個store,示例**如下:

import  from 'redux'

const addreducer = function

(){}

const deletereducer = function

(){}

const reducers = combinereducers();

const store = createstore(reducers);

react和redux的結合使用react-redux提供的provider和connect兩個模組,本人不才,初出茅廬,這篇文章有比較詳細的介紹,react和redux的連線react-redux

pros and cons of using immutability with react.js

來自乙個react SPA的總結 es6的應用

這篇主要總結一些,es6在react中的應用,並沒有囊括所有,只是總結一些本人平常沒有理解的知識點 1.es6 arrow functions es6的箭頭函式在這個簡單project中用到多次,下面以乙個對比 塊展示一下 old way with es5 componentdidmount fun...

來自HPE的乙個渣渣學生的總結

物理終端 直接接入本機的顯示器和鍵盤裝置 虛擬終端 附加在物理終端之上的以軟體方式虛擬實現的終端 centos 6預設啟動6個虛擬終端 使用ctrl alt f1 f6 檢視當前的終端裝置 tty 檢視當前使用的shell echo shell 作業系統 靜態資料鏈結庫 動態資料鏈結庫 window...

來自乙個前端新手的感悟

初入社會,我只是乙個前端路上飛行的菜鳥,經過一段時間的工作之後,才知道,我踩了無數的坑。希望,看過我寫的文章的同胞們,不要再和我犯同樣的錯誤。純屬個人思考 1.當負責專案中乙個模組的開發時,不要忘記,它只是專案中的乙個模組。當我拿到專案經理安排好的工作計畫書時,開始對自己負責的部分的需求進行熟悉,這...