ES6, React, Redux, Webpack写的一个爬 GitHub 的网页

摘要：开发历程项目地址这是一个什么玩意儿上有太多太多的牛人，这个东西可以帮助你通过给定的一个的用户然后通过他关注的人找出他关注的人里的被关注数最高的几个然后不断的循环从而通过关系链找到上最受欢迎的大神这个东西还只是一个小东西如果你有兴趣可

find-github-star 开发历程：

项目地址 find-github-star

github上有太多太多的牛人， 这个东西可以帮助你通过给定的一个github的用户, 然后通过他关注的人, 找出他关注的人里的被关注数最高的几个. 然后不断的循环, 从而通过关系链找到github上最受欢迎的大神～ 这个东西还只是一个小东西, 如果你有兴趣, 可以fork这个小的不能再小的项目...

项目截图

一来是自己确实想做着玩一玩, 还有就是这个项目用到了react + redux. 想进一步的熟悉redux这个玩意儿。

用到的工具: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" }),
  ]
}

当我刚开始使用react-redux的时候, 我的内心是绝望的. 什么connect, provider, 各种props映射, 各种dispatch映射.但是毕竟就是想拿这个东西顺便学习一下react-redux. 话不多说，　上代码!

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传一个函数, 中间件LoggerMiddleware会记录你的每一个action， 并且利用方法console.group, 美观的输出.

好! Provider组件才是重点, Provider利用react的context机制, 将创建好的store暴露给app以及其所有后代. 这样App的后代就能通过context访问到store啦! 最后面那个if 就是webpack的webpack dev server插件的超炫功能----热替换.

因为store已经暴露到了整个App下, 所以所有组件可以调用store.dispatch来分发动作(数据流出组件), 也可以调用store.subscribe来订阅(数据流入组件). 但是redux的设计者觉得这样有点坑, 因为在react中, 有些组件没有state, 只有props, 这样的组件我们称之为纯组件. 于是乎, redux将组件分成了两个部分, 容器组件和展示组件.对于展示组件(纯组件)并不需要状态, 容器组件给出固定的props, 总会输出一致的展示组件. 于是, 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是一个可以将Main组件包装起来的函数, Main组件被包装后会在外层新增一个新的组件包裹Main. mapStateToProps会在store的state发生变化的时候被调用, 其返回值会传给Main组件作为props, 其实看名字就知道了.

这里用到了异步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函数是一个Action Creator,只要爬取数据, 这个函数就会被调用. 这里用到了各种then(旗帜鲜明的表示用好Promise/A+规范真的是爽歪歪.)fetchProfiles会被传入dispatch(用来分发之后的异步action)和getStore.倒数第n行的dispatch的调用就继续发起一个异步action, 下一个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的匿名函数的写法真的是让我像写诗一样写代码~

大概的就这么多, 不总结的话就不像是一篇文章了, 总结如下:

webpack确实是一个好东西, 要是能够用上热替换的话真的是太强大了, 怪不得能火成这鸟样...其代码分割也是很强大的

使用react中的context可以让react自动将信息传到子树中的任何组件,但是组件必须设置contextTypes, 否则无法访问对应的context.对于主题等这些全局信息应该使用context传给子树, 但是一些平常的state最好别传, 原因, 而且context的API不是稳定的, 今后可能会发生变化.

redux中store是唯一存储状态的容器(这也是和flux的不同之处), 还有容器组件和展示组件, redux通过provider注入store中的state到App中, 通过connect来构造容器组件, 方便组件更好的获得(输出)state, 同时限制展示组件只能从容器组件获取state. 一个App中的容器组件可以有多个.

redux的中间件的用法及原理, 很强势, 建议去看. 这是地址

thunk以及promise等中间件可以实现异步的action.

最后就是写这个项目感觉很棒, es6+react+babel+webpack+redux 写前端真的是酷比(苦逼)了!

写这篇文章真的很不容易哈, 如果你觉得我写的对你有那么一点点的帮助, 可以选择关注我的新浪微博, Twitter, Github, Facebook, 个人主页, 个人主页还在备案,　马上开通~

参考文章:

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

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

完!~ 荆轲刺秦王~ ～～～～～～其实我不是王尼玛...