摘要：開(kāi)發(fā)歷程項(xiàng)目地址這是一個(gè)什么玩意兒上有太多太多的牛人，這個(gè)東西可以幫助你通過(guò)給定的一個(gè)的用戶然后通過(guò)他關(guān)注的人找出他關(guān)注的人里的被關(guān)注數(shù)最高的幾個(gè)然后不斷的循環(huán)從而通過(guò)關(guān)系鏈找到上最受歡迎的大神這個(gè)東西還只是一個(gè)小東西如果你有興趣可

find-github-star 開(kāi)發(fā)歷程：

項(xiàng)目地址 find-github-star

github上有太多太多的牛人， 這個(gè)東西可以幫助你通過(guò)給定的一個(gè)github的用戶, 然后通過(guò)他關(guān)注的人, 找出他關(guān)注的人里的被關(guān)注數(shù)最高的幾個(gè). 然后不斷的循環(huán), 從而通過(guò)關(guān)系鏈找到github上最受歡迎的大神～ 這個(gè)東西還只是一個(gè)小東西, 如果你有興趣, 可以fork這個(gè)小的不能再小的項(xiàng)目...

項(xiàng)目截圖

一來(lái)是自己確實(shí)想做著玩一玩, 還有就是這個(gè)項(xiàng)目用到了react + redux. 想進(jìn)一步的熟悉redux這個(gè)玩意兒。

用到的工具:webpack. 直接上配置

var webpack = require("webpack");
var OpenBrowserPlugin = require("open-browser-webpack-plugin");

module.exports = {

  entry: [
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:8080",
    "./src/entry.js"
  ],

  output: {
    path: "./build",
    filename: "[name].js"
  },

  module: {
    loaders: [
      { test: /.less$/, loader: "style!css!less" },
      { test: /.jsx?$/, loader: "babel-loader", exclude: /node_modules/ }
    ]
  },

  plugins: [
    new OpenBrowserPlugin({ url: "http://localhost:8080" }),
  ]
}

當(dāng)我剛開(kāi)始使用react-redux的時(shí)候, 我的內(nèi)心是絕望的. 什么connect, provider, 各種props映射, 各種dispatch映射.但是畢竟就是想拿這個(gè)東西順便學(xué)習(xí)一下react-redux. 話不多說(shuō)，　上代碼!

entry.js

const loggerMiddleware = createLogger()
let store = createStore(reducer, compose(
  applyMiddleware(thunk, loggerMiddleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
))
devTools.updateStore()
render(
  
    
  , document.getElementsByTagName("div")[0])

if (module.hot) {
  module.hot.accept()
}

　這里用到了redux中間件的概念,　這里建議看官方的文檔比較靠譜. 中間件thunk是允許你向dispatch傳一個(gè)函數(shù), 中間件LoggerMiddleware會(huì)記錄你的每一個(gè)action， 并且利用方法console.group, 美觀的輸出.

好! Provider組件才是重點(diǎn), Provider利用react的context機(jī)制, 將創(chuàng)建好的store暴露給app以及其所有后代. 這樣App的后代就能通過(guò)context訪問(wèn)到store啦! 最后面那個(gè)if 就是webpack的webpack dev server插件的超炫功能----熱替換.

因?yàn)閟tore已經(jīng)暴露到了整個(gè)App下, 所以所有組件可以調(diào)用store.dispatch來(lái)分發(fā)動(dòng)作(數(shù)據(jù)流出組件), 也可以調(diào)用store.subscribe來(lái)訂閱(數(shù)據(jù)流入組件). 但是redux的設(shè)計(jì)者覺(jué)得這樣有點(diǎn)坑, 因?yàn)樵趓eact中, 有些組件沒(méi)有state, 只有props, 這樣的組件我們稱之為純組件. 于是乎, redux將組件分成了兩個(gè)部分, 容器組件和展示組件.對(duì)于展示組件(純組件)并不需要狀態(tài), 容器組件給出固定的props, 總會(huì)輸出一致的展示組件. 于是, state都放到了容器組件這里， 為了讓容器組件更好的獲取(輸出)store里的state. 就要使用connect. 上代碼!

Main.js

 class Main extends Component {

  createProfiles(profiles, repos) {
    return profiles.map((profile, index) =>
        )
  }

  render() {
    return (
      

        { this.createProfiles(this.props.profiles, this.props.repos) }
      
    )
  }
}

function mapStateToProps(state) {
  return {
    profiles: state.profiles,
    repos: state.repos

  }
}

export default connect(
  mapStateToProps
)(Main)

最下面的connect是一個(gè)可以將Main組件包裝起來(lái)的函數(shù), Main組件被包裝后會(huì)在外層新增一個(gè)新的組件包裹Main. mapStateToProps會(huì)在store的state發(fā)生變化的時(shí)候被調(diào)用, 其返回值會(huì)傳給Main組件作為props, 其實(shí)看名字就知道了.

這里用到了異步action, 直接上代碼!

actions.js

export const fetchProfiles = username => (dispatch, getState) => {
  dispatch(requestProfile(username))

  return fetch(`https://api.github.com/users/${username}`)
    .then((response) => {

      // 檢查用戶是否存在
      if (response.status !== 200) {
        throw new Error("profiles fetch failed")
      }

      return fetch(`https://api.github.com/users/${username}/following`)
    })
    .then(response => response.json())
    .then(following => {
      return Promise.all(following.map(f => {
        return fetch(`https://api.github.com/users/${f.login}`)
      }))
    })
    .then(responses => Promise.all(responses.map(response => response.json())))
    .then(followingUsers => {
      const sortedUsers = followingUsers.sort((a, b) => b.followers - a.followers)

      return sortedUsers.slice(0, 3)
    })
    .then((users) => {
      dispatch(requestSuccess(users))
      console.dir(users)
      return Promise.all(users.map(user =>
          fetch(`https://api.github.com/users/${user.login}/repos`)))
    })
    .then(responses => Promise.all(responses.map(res => res.json())))
    .then((repos) => {
      repos = repos.map(repo => repo.slice(0, 3))
      dispatch(requestReposSuccess(repos))
    })
    .catch((err) => dispatch(requestFailed(err)))
}

這里才是最好玩(最坑)的地方, fetchProfiles函數(shù)是一個(gè)Action Creator,只要爬取數(shù)據(jù), 這個(gè)函數(shù)就會(huì)被調(diào)用. 這里用到了各種then(旗幟鮮明的表示用好Promise/A+規(guī)范真的是爽歪歪.)fetchProfiles會(huì)被傳入dispatch(用來(lái)分發(fā)之后的異步action)和getStore.倒數(shù)第n行的dispatch的調(diào)用就繼續(xù)發(fā)起一個(gè)異步action, 下一個(gè)action的代碼如下:

function requestReposSuccess(repos) {
  repos = repos.map(repo => repo.sort((a, b) => b.stargazers_count - a.stargazers_count))
  repos = repos.map(repo => repo.map(r => ({
    star: r.stargazers_count,
    name: r.name,
    description: r.description.slice(0, 40) + "   ..."
  })))

  return {
    type: REQUEST_REPOS_SUCCESS,
    payload: repos
  }
}

旗幟鮮明的表示es6的匿名函數(shù)的寫(xiě)法真的是讓我像寫(xiě)詩(shī)一樣寫(xiě)代碼~

大概的就這么多, 不總結(jié)的話就不像是一篇文章了, 總結(jié)如下:

webpack確實(shí)是一個(gè)好東西, 要是能夠用上熱替換的話真的是太強(qiáng)大了, 怪不得能火成這鳥(niǎo)樣...其代碼分割也是很強(qiáng)大的

使用react中的context可以讓react自動(dòng)將信息傳到子樹(shù)中的任何組件,但是組件必須設(shè)置contextTypes, 否則無(wú)法訪問(wèn)對(duì)應(yīng)的context.對(duì)于主題等這些全局信息應(yīng)該使用context傳給子樹(shù), 但是一些平常的state最好別傳, 原因, 而且context的API不是穩(wěn)定的, 今后可能會(huì)發(fā)生變化.

redux中store是唯一存儲(chǔ)狀態(tài)的容器(這也是和flux的不同之處), 還有容器組件和展示組件, redux通過(guò)provider注入store中的state到App中, 通過(guò)connect來(lái)構(gòu)造容器組件, 方便組件更好的獲得(輸出)state, 同時(shí)限制展示組件只能從容器組件獲取state. 一個(gè)App中的容器組件可以有多個(gè).

redux的中間件的用法及原理, 很強(qiáng)勢(shì), 建議去看. 這是地址

thunk以及promise等中間件可以實(shí)現(xiàn)異步的action.

最后就是寫(xiě)這個(gè)項(xiàng)目感覺(jué)很棒, es6+react+babel+webpack+redux 寫(xiě)前端真的是酷比(苦逼)了!

寫(xiě)這篇文章真的很不容易哈, 如果你覺(jué)得我寫(xiě)的對(duì)你有那么一點(diǎn)點(diǎn)的幫助, 可以選擇關(guān)注我的新浪微博, Twitter, Github, Facebook, 個(gè)人主頁(yè), 個(gè)人主頁(yè)還在備案,　馬上開(kāi)通~

參考文章:

http://jiavan.com/react-async...

http://www.ruanyifeng.com/blo...

完!~ 荊軻刺秦王~ ～～～～～～其實(shí)我不是王尼瑪...