Redux基本使用(一)

2021-10-12 02:41:36 字數 1664 閱讀 2260

redux基礎

一、設計思想:react是單項資料流框架,為了在相對較大的專案中方便進行狀態管理。

二、基本概念:

1.store:儲存資料並且是改變state的地方,用createstore來進行建立。(整個應用只能有乙個)

import

from

'redux'

;//createstore函式用來接收reducer函式作為引數,返回乙個新的store物件

const store =

createstore

(reducer)

export

default store

2.reducer純函式:

(1)儲存預設資料(用defaultstate);

const defaultstate =

(2)接收action

//reducer收到action物件後,必須給出乙個新的state傳遞到store中進行更新,這樣view才會發生變化。這種state的計算過程就叫做reducer

//reducer是乙個函式,接收當前state和action作為引數。

function

reducer

(state = defaultstate,action)

if(action.type===

add_item)if

(action.type===

delete_item

)// console.log(state,action)

return state

}

store.getstate()拿到當前state

this.state = store.getstate(),這裡對於state的改變用setstate

4.action物件:state變化能導致view發生變化,同樣view的變化也會導致state發生變化,用只能戶接觸到viewaction就是使用者通過檢視層發出的通知,以此來讓state發生變化。

(以其中某乙個函式為例)

changeinputvalue

(e) store.

dispatch

(action)

}

5.store.dispatch函式:根據上面**也能猜到,action想要傳到reducer使用這個函式才是唯一的方法。

6.store.subscribe函式用於訂閱redux的狀態。

//通過函式進行繫結

store.

subscribe

(this

.storechange)

//訂閱redux狀態

redux基本使用

actiontype.js 隨著專案大型化,所以要抽取出來乙個actiontype.js檔案來記錄各種actiontype常量 export const set currentindex set currentindex store.js import from redux import rootr...

redux的基本使用方法

redux的使用 檔案store index.js import from redux const counterreducer function statr 0,action const store creatstore counterreducer export default store 元件...

Redux基本介紹

react 只是 dom 的乙個抽象層,並不是 web 應用的完整解決方案。有兩個方面,它沒涉及。結構 元件之間的通訊 對於大型的複雜應用來說,這兩方面恰恰是最關鍵的。因此,只用 react 沒法寫大型應用 為了解決這個問題,2014年 facebook 提出了 flux 架構 的概念,引發了很多的...