Redux學習總結一

2021-08-19 08:30:40 字數 3370 閱讀 7190

參考阮一峰部落格:redux教程

web應用是乙個狀態機,檢視與狀態是一一對應的。

所有狀態都儲存在乙個物件裡面。

store是儲存資料的地方,可以將其看成乙個容器,整個應用只能有乙個store.

state是store物件的某個時點的資料集合,當前時刻的state可以通過store.getstate()得到。

state和view一一對應,action就是view發出的通知,表示state應該要發生變化了。

action是乙個物件,其中的type屬性是必須的,表示action的名稱。

注:改變state的唯一辦法就是使用action.

它是用以定義乙個函式來生成action

const add_todo = '新增 todo';

function

addtodo

(text)

}const action = addtodo('learn redux');

它是view發出action的唯一方法,接受乙個action物件作為引數並將它傳送出去。

import  from 'redux';

const store = createstore(fn);

store.dispatch();

reducer是乙個函式,它接受action和當前state作為引數,返回乙個新的state.

const defaultstate = 0;

const

reducer = (state = defaultstate, action) =>

};const state = reducer(1, );

注:實際應用中,store.dispatch方法會觸發reducer的自動執行,因此createstore可接受reducer作為引數生成乙個新的store.

reducer函式最重要的特徵是乙個純函式,即同樣的輸入必定得到同樣的輸出。

純函式是函式式程式設計的概念,必須遵守以下約束:

1. 不得改寫引數

2. 不能呼叫系統i/o的api

3. 不能呼叫date.now()或者math.random()等不純的方法,因為每次都會得到不一樣的結果

注:reducer函式裡面不能改變state,必須返回乙個全新的物件。

// state 是乙個物件

function

reducer

(state, action) , state, );

// 或者

return ;

}// state 是乙個陣列

function

reducer

(state, action)

store允許使用store.subscribe方法設定監聽函式,一旦state發生變化,就自動執行這個函式。

//將view的更新函式放入listen可以實現view的自動渲染

import from 'redux';

const store = createstore(reducer);

store.subscribe(listener);

方法返回乙個函式,呼叫這個函式就可以解除當前listener監聽

let unsubscribe = store.subscribe(() =>

console.log(store.getstate())

);unsubscribe

();

store提供了三個方法:store.getstate()/store.dispatch()/store.subscribe()

import  from

'redux';

let = createstore(reducer);

注:createstore方法還接受第二個引數,表示state的最初狀態,它會覆蓋reducer函式的預設初始值。

//createstore方法的簡單實現

const

createstore = (reducer) => ;

const

subscribe = (listener) =>

};dispatch({});

return ;

};

redux提供了乙個combinereducers方法用於reducer的拆分。

import  from 'redux';

const chatreducer = combinereducers()

export

注:state屬性名必須與子reducer同名,combinereducers()函式會根據state的key去執行相應的子reducer,並將返回結果合併成乙個大的state物件。

//combinereducer的簡單實現

const combinereducers = reducers=> , action) => ,

{} );

};};

使用者發出action.

store.dispatch(action);state一旦發生變化,store會呼叫監聽函式.

store.subscribe(listener);listener通過store.getstate()得到當前狀態,若用react,則會觸發重新渲染view.

function

listerner

()

六、例項:計數器

功能:為計數器新增遞增和遞減的action,並將引數value的值顯示在網頁上,store的監聽函式設定為render,每次state的變化都會導致網頁重新渲染。

const

counter = () => ( +

-);const

reducer = (state = 0, action) =>

};const store = createstore(reducer);

const

render = () => )}

ondecrement=)}

/>,

document.getelementbyid('root')

);};render();

store.subscribe(render);

Redux學習總結二

參考阮一峰redux教程 新增日誌功能 let next store.dispatch store.dispatch function dispatchandlog action 中介軟體就是乙個函式,對store.dispatch方法進行改造,在發出action和執行reducer這兩步之間,新增...

Redux學習日誌(一)

redux中文文件 阮一峰的網路學習日誌 redux是js的狀態容器,提供可 化狀態管理 redux除了和react一起用之外還支援 其他介面庫 他體積小 2kb 而且沒有任何依賴 當ui層十分簡單,沒有很多互動,redux就是不必要的,用了反而增加複雜性 以上這些情況不需要使用 以上這些情況可以使...

Redux原始碼學習篇 一 redux實現

本文會逐步探索redux到應用分為3個系列 redux 實現 react redux 實現 redux中介軟體的應用與實現 案例場景 現在有乙個計數器,或者點讚場景 現在用redux如何記錄呢?import from redux action const like like const unlike...