實現乙個redux

大綱

1、store、state、action、store.dispatch、reducer的概念

2、redux 單向資料流流程說明

3、實現乙個 redux

4、中介軟體日誌列印及非同步呼叫實現

我們簡述一下 redux 完成一次資料更新的過程：

a. 首先，使用者通過操作發出 action ——> store.dispatch

b. store 會自動呼叫 reducer 方法，並傳入當前 action 與 state，reducer 經過預定資料處理之後，會返回乙個新的 state。 ——> reducer(action, state)

c. state 發生變化，store 呼叫監聽函式。 ——> store.subscribe()

redux 提供了以下幾個 api 我們先了解一下：

我們建立乙個 createstore 方法，該方法會返回 getstate、dispatch 和 subscibe() 方法。

const createstore = (reducer, enhancer) => 

// 獲取當前的資料
const getstate = () => ;
// 進行訂閱和退訂
const subscribe = (listener) => 
};// 分發 action
const dispatch = (action) => ;
// 手動執行一次，用於初始化
dispatch({});
return 
}

// 每乙個中介軟體都接收 getstate 和 dispatch 方法

const middlewarechain = middlewares.map((mid) => mid(midapi));

// 將中介軟體組合成乙個函式進行呼叫

dispatch = compose(...middlewarechain)(dispatch);

return

}};var compose = (...mid) =>

if (mid.length === 1)

// 將中介軟體聚合成 f1(f2(f3(args)) 形式並返回

return mid.reduce((l, r) => (...args) => l(r(...args)));

}

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

// 判斷 state 是否發生變化
let haschanged = false;
for (let i = 0; i < reducerkeys.length; i++) 
}haschanged = haschanged || object.keys(reducers).length !== object.keys(state).length;
return haschanged ? newstate : state;
}};

store.dispatch((dispatch) => );

}, 3000);
});

const thunk = () =>

(next) => (action) => 
return next(action);
}

const logger = () => 

}

寫在後面：首發於個人部落格

自己實現乙個Redux。

redux是乙個用於狀態管理的js框架，是flux架構的一種實現 如圖 reducer 為乙個使用者自定義的函式，在store分發 dispacth action時提供處理方法去更新狀態樹中的狀態。應該為乙個純函式。action 為乙個使用者自定義的物件，裡面包含乙個type屬性，標識乙個動作型別。...

通過乙個demo了解Redux

todolist小demo 效果展示 專案位址 回到頂部 單向 資料流 資料流是我們的行為與響應的抽象 使用資料流能幫我們明確了行為對應的響應，這和react的狀態可 的思想是不謀而合的。常見的資料流框架有flux reflux redux。相比其它資料流框架，redux輕量 壓縮後只有2k 而且在...

通過乙個demo了解Redux

todolist小demo 效果展示 專案位址 單向 資料流 資料流是我們的行為與響應的抽象 使用資料流能幫我們明確了行為對應的響應，這和react的狀態可 的思想是不謀而合的。常見的資料流框架有flux reflux redux。相比其它資料流框架，redux輕量 壓縮後只有2k 而且在乙個rea...