redux的初步實現

2021-10-07 23:12:40 字數 1914 閱讀 9750

redux與vuex一致,在這裡由store/index.js定義需求,通過dispatch將需求發給reducer,具體什麼時候發,由頁面(.html/.vue/.jsx)來觸發

react與vue一樣,都存在父傳子、子傳父、兄弟元件之間的傳值,單純的頁面

之間傳值的實現方式需要掌握是肯定的,比如

父傳子:

由父元件在呼叫子元件的時候將要傳遞的值通過屬性繫結的方式,再由子元件

通過props接收,可以回溯到react的state裡面去(vue回溯到data裡面去),再在

相應的地方進行渲染。

子傳父:

由父元件定義函式,將函式傳遞給子元件觸發,子元件在觸發的同時將自己的

資料作為引數傳遞(執行的是父元件的方法,子元件在觸發的時候將自己的資料作為

引數傳遞進父元件的函式,實現父元件的業務邏輯)

兄弟元件傳值:

兄弟元件傳值,react與vue的區別較大。

想要通過com2的方法驅動com1的資料發生改變,不同的兩個元件之間是無法進行溝

由com2的函式觸發,告知父元件改變資料,再將資料傳遞給com1進行渲染

而vue是通過事件匯流排的方法實現兄弟元件之間的通訊,具體後續詳述。

不過相同的是,不管是react還是vue都可以通過乙個機制管理所有公用的資料、

函式,vue---vuex,react---redux

1.定義src/store/index.js,1> 引入redux ->2.引入src/store/reducer.js ->3.暴露store

// 1.引入redux

import

from

'redux'

// 2.與reducer建立聯絡

import reducer from

'./reducer'

// 3.暴露store

export

default

createstore

(reducer)

reducer.js

// 定義好資料

其實只是把自己頁面的資料提到公用的store裡面去了,然後在想用的地方呼叫即可

redux 初步理解

派發乙個 action 給 reducer,reducer 生成了乙個新的 state redux 通過 store 來儲存資料,store.getstate 獲得資料,而要更新 state,則需要 store.dispatch action 由於reducer 裡才會生成乙個新的 state,所以...

redux(一)初步讀懂配置redux流程

建立state.js let state export default state 定義action型別名常量count.js export const add action add action export const remove action remove action export con...

動手實現 redux

假如按鈕和介面不在同一元件,經常用redux去實現上面功能,可以想象到如下 const test hello world const mapstatetoprops state 用過mapstatetoprops從頂層拿到屬性然後展示,在另乙個組建通過mapdispatchtoprops去觸發act...