使用redux改寫的github-explorer

Introduction

剛學習了redux不久，剛好看到一個優秀的react項目github-explorer，該應用使用了RxJS去處理數據流，爲了鞏固學習便有了使用redux改寫的想法。

源碼地址
DEMO地址

自定義中間件

應用中使用了自定義箇中間件api，方便編寫異步的 action creators。異步action能夠定義成如下方式

export function loadUserProfileRepos (username) {
  return {
    types: [USER_PROFILE_REPOS_REQUEST, USER_PROFILE_REPOS_RECEIVED, USER_PROFILE_REPOS_FAILURE],
    callAPI: () => api('fechURL`)
  }
}

中間件接收到這種形式的action，會處理異步請求並在適當的時候dispatchtypes中的各項。

其餘

應用的拉取數據的進度條方面，負責拉取狀態reducer在接收到諸如xx_REQUEST和xx_RECEIVED的actions後，會更新表示進度條狀態的數據。

由於只是鞏固redux學習，因此原應用的部分動畫效果沒有加上。

除了數據流部分，應用大部分都是照搬了原應用。

dependencies

使用了redux後加上的依賴

• redux

• react-router-redux

Development

開發

npm install
npm run start

打包

npm run dist

Reference

github-explorer
redux 文檔