第一次使用react-redux时，到网【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。上搜各种资料学习，结果发现一大堆资料全在未经授权，禁止复制转载。【本文首发于唐霜的博客】谈redux，搞的蒙头转向。这些文章的作未经授权，禁止复制转载。【转载请注明来源】者忽略了一个问题，对于新手而言，其实更多【原创内容，转载请注明出处】【本文首发于唐霜的博客】的是要从自己熟悉的知识体系去延生开，而不本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net是上来搞一堆概念。和这些资料不同，我写这【本文首发于唐霜的博客】【未经授权禁止转载】篇文章，反其道而行，直接先将react中【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net使用react-redux，然后慢慢反推【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netredux。对于读者而言，更多的是从已知转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的react知识推演过去，理解之后再去理原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。解redux。

【作者：唐霜】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ang.net【版权所有】唐霜 www.tangshu【本文受版权保护】本文作者：唐霜，转载请注明出处。ang.net

安装

npm install --save redux react-redux

安装react-redux时要一起安装r本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。edux，因为我们要用到redux的一个【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net方法，但这个方法我们只管用，不用深纠。

未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ang.net

改造入口文件

一般我们会有一个入口文件，我一般使用in原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。dex.js，因为react是一个组件的未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netUI构建库，所以对于一个web应用而言，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】一切都是组件。但是在入口文件里，我不是再未经授权，禁止复制转载。【转载请注明来源】写组件，而是在写把组件挂载到DOM里面，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】所以，我的index.js是这样写的：

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【未经授权禁止转载】

import React from 'react'
import { render } from 'react-dom'
import { HashRouter as Router, Route } from 'react-router-dom'
import App from './App'
import './styles/index.scss'

render(
  <Router>
    <Route path='/' component={App} />
  </Router>
  ,
   document.getElementById('app'),
)

这样的代码结构就非常简明。就是利用rea【原创内容，转载请注明出处】【本文受版权保护】ct-dom来渲染到#app这个div中未经授权，禁止复制转载。未经授权，禁止复制转载。。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【本文受版权保护】ng.net

react中的组件在我看来有两类，一类是未经授权，禁止复制转载。【原创不易，请尊重版权】纯粹的UI组件，比如一个弹出框、下拉菜单未经授权，禁止复制转载。【转载请注明来源】、tooltip等等，它们是独立的，在任原创内容，盗版必究。原创内容，盗版必究。何应用中都可以复用，只要传props就可【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net以了。而另一类，则称之为业务组件，包括整【本文首发于唐霜的博客】【本文首发于唐霜的博客】个页面的布局、数据交互等等，这类组件实际原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】上通过对纯UI组件的包装，实现了真正的应本文作者：唐霜，转载请注明出处。【本文受版权保护】用的业务作用。不同的应用，可以用相同的U【转载请注明来源】未经授权，禁止复制转载。I组件库，但自己的业务必须靠自己完成。所【未经授权禁止转载】【原创内容，转载请注明出处】以，虽然都叫组件，但是业务组件的复用性往【本文首发于唐霜的博客】【本文首发于唐霜的博客】往仅限于同一个应用中。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

现在我们要改造这个入口index.js文【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。件来使用react-redux。

转载请注明出处：www.tangshua【转载请注明来源】本文作者：唐霜，转载请注明出处。ng.net【转载请注明来源】【关注微信公众号：wwwtangshua原创内容，盗版必究。未经授权，禁止复制转载。ngnet】

我们假设改造的目的，是在App组件中加入【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】一个loading效果，这个loadin本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。g效果可以被App的任何子组件触发，也就著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。是说整个应用只有一个loading，但是【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。在任何地方都可以显示/隐藏。react-本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。redux的作用就是建立一套所有组件都可未经授权，禁止复制转载。【未经授权禁止转载】以访问的state系统，这个系统被称为s【原创内容，转载请注明出处】【未经授权禁止转载】tore。玩过vuex的小伙伴应该秒懂。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。不懂也不要紧，简单的说就是store里面【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net存放了一堆state，同时store提供【转载请注明来源】转载请注明出处：www.tangshuang.net了获取state的方法getState，【转载请注明来源】原创内容，盗版必究。修改state的方法dispatch，以本文作者：唐霜，转载请注明出处。原创内容，盗版必究。及监听state被改动的方法subscr【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ibe。但是这三个方法对于我们使用rea【本文受版权保护】著作权归作者所有，禁止商业用途转载。ct-redux的小伙伴而言，只需要用到原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netdispatch方法，我们会把state本文作者：唐霜，转载请注明出处。原创内容，盗版必究。直接注入到组件的props中，而监听st【原创内容，转载请注明出处】未经授权，禁止复制转载。ate变化后重新渲染界面react-re【作者：唐霜】原创内容，盗版必究。dux已经自动完成了。

【本文受版权保护】原创内容，盗版必究。【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ngnet】

改造后的代码如下：

【关注微信公众号：wwwtangshua【转载请注明来源】【原创不易，请尊重版权】ngnet】转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ng.net

import React from 'react'
import { render } from 'react-dom'
import { HashRouter as Router, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App'
import './styles/index.scss'
const store = createStore((state, action) => {
  if (action === 'showLoading') return { loading: true }
  return { loading: false }})
/**
 * action就是在组件里面调用dispatch方法的时候传入的参数，怎么在组件中调用下文会讲
 * state就是全局state，其实和组件内的this.state是一个道理，都是一个对象
 * return后面是一个新的state，这个state会覆盖上一个state
 * 有一点必须注意，这个地方return的state必须是一个新的object，而不能直接通过修改state之后return回来，比如下面这种操作就是错的：
 * state.loading = false; return state; // 这样做绝对不行，谨记！
 * 如果你的state有很多个属性，要使用Object.assign进行克隆，再这样操作：
 * let newState = Object.assign(state); newState.loading = false; return newState; // 这样可以
 */
render(
  <Provider store={store}>
    <Router>
      <Route path='/' component={App} />
    </Router>
  </Provider>
  ,
  document.getElementById('app'),
)

Provider组件把你的整个App项目【作者：唐霜】【原创不易，请尊重版权】的组件包含起来，那么这些包含起来的组件（转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】以及它们的子组件）就可以被提供react本文版权归作者所有，未经授权不得转载。【转载请注明来源】-redux的注入。注意，我这里说的是“本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】可以”，而不是一定，要实现真正使用rea原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netct-redux，我们还要改造Provi【本文受版权保护】【版权所有，侵权必究】der包含起来的组件才行。

本文作者：唐霜，转载请注明出处。【作者：唐霜】

改造组件

前面说了，用Provider组件包起来的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】组件可以被注入react-redux的功【本文首发于唐霜的博客】【本文首发于唐霜的博客】能，那么怎么改造呢？用一个叫connec转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】t的函数对现有组件进行二次构造，得到一个【原创不易，请尊重版权】未经授权，禁止复制转载。新的组件，将这个组件export出去。

原创内容，盗版必究。【关注微信公众号：wwwtangshua【作者：唐霜】【转载请注明来源】ngnet】【版权所有】唐霜 www.tangshu【转载请注明来源】【原创不易，请尊重版权】ang.net本文版权归作者所有，未经授权不得转载。

我们来看下我原来的App组件是怎么写的：

【版权所有，侵权必究】【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】et 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
    }
  }
  toggleLoading() {
    this.setState({
      loading: !this.state.loading,
    })
  }
  render() {
    return (
      <div>
        ...
        <a href="javascript:" onClick={this.toggleLoading.bind(this)}>toggle loading</a>
        ...
        <div className={'loading' + this.state.loading ? '' : ' hidden'}>loading...</div>
      </div>
    )
  }}

上面我用了组件内的state.loadi【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netng来控制整个页面的loading是否显转载请注明出处：www.tangshuang.net【本文受版权保护】示。但是，如果我们要在其他组件中使用lo【本文首发于唐霜的博客】【作者：唐霜】ading，就必须不断通过子组件的pro转载请注明出处：www.tangshuang.net原创内容，盗版必究。ps传递toggleLoading方法，【作者：唐霜】著作权归作者所有，禁止商业用途转载。那也实在太蠢了。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【作者：唐霜】【原创不易，请尊重版权】ngnet】

解决这个问题的办法有很多，比如通过rea本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ct提供的props.children来原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。递归注入，使得每一个内部组件都拥有tog【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】gleLoading方法的调用权限。但是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，我们这里使用react-redux来解本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。决，让每一个经过改造的组件都拥有修改st本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ore中的state的能力，通过修改这个原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。state来达到重新渲染App组件中的l【原创不易，请尊重版权】原创内容，盗版必究。oading的效果。

转载请注明出处：www.tangshua【作者：唐霜】【原创不易，请尊重版权】ng.net【原创内容，转载请注明出处】

改造后如下：

【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【转载请注明来源】

import React, { Component } from 'react'
import { connect } from 'react-redux'

class App extends Component {
  constructor(props) {
    super(props)
  }
  toggleLoading() {
    this.props.dispatch('showLoading')
  }
  render() {
    return (
      <div>
      ...
      <a href="javascript:" onClick={this.toggleLoading.bind(this)}>toggle loading</a>
      ...
      <div className={'loading' + this.state.loading ? '' : ' hidden'}>loading...</div>
      </div>
    )
  }
}
function mapStateToProps(state) {
  return {
    loading: state.loading,
  }
  // 这里的state是react-redux store中的state，前面我们已经写过相关的代码，return { loading: false }
}
export default connect(mapStateToProps)(App)

红色部分是修改后的起作用代码，其实主要实【本文首发于唐霜的博客】【本文受版权保护】现了两件事，1）将store中的stat【版权所有，侵权必究】未经授权，禁止复制转载。e.loading作为组件的props.原创内容，盗版必究。未经授权，禁止复制转载。loading的值，2）通过connec【本文首发于唐霜的博客】【本文受版权保护】t实现将dispatch方法注入到组件的【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。props.dispatch。

转载请注明出处：www.tangshua【本文受版权保护】【原创内容，转载请注明出处】ng.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

上面是对App组件的改造，如果你要在其他原创内容，盗版必究。未经授权，禁止复制转载。组件（包括App的子组件）中也想对loa本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ding界面进行控制，也可以参照上面的代【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。码进行改造。改造之后，这些组件仅仅和re【转载请注明来源】【转载请注明来源】act-redux产生了依赖关系，组件与【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net组件完全解耦，但是却可以通过react-本文版权归作者所有，未经授权不得转载。【本文受版权保护】redux作为桥梁，相互控制对方的UI展【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】示。

【未经授权禁止转载】【作者：唐霜】【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ang.net

遗留问题

你可能会想，如果一个组件必须依赖reac【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。t-redux，那么它的独立性是不是减弱【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。了？是的，这是一定的，所以我前文小字部分未经授权，禁止复制转载。【本文首发于唐霜的博客】已经说了，业务型组件本身就对整个项目的数【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。据结构之类的有依赖。比如说这里改造后的A【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】pp组件，在mapStateToProp【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。s函数中我们直接使用了state.loa【未经授权禁止转载】原创内容，盗版必究。ding，假如state是一个null不原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。就会报错么？那是因为我们在Provide本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。r的时候就已经知道state一定有loa【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ding属性，所以这肯定是有依赖的。因此【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，redux的规则里面明确说了要将UI和转载请注明出处：www.tangshuang.net【版权所有，侵权必究】业务分离开发的思想。

【本文首发于唐霜的博客】【作者：唐霜】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

当然，你肯定还会有其他疑虑，比如说sta转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nette很庞大怎么办？react-redux【作者：唐霜】本文版权归作者所有，未经授权不得转载。是怎么做到自动更新界面的？connect【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】具体的用法是什么？等等这样的问题。这些问转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。题本文都不会回答，希望有机会可以深入去写【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。，下面给一些参考资料：

【原创内容，转载请注明出处】【原创不易，请尊重版权】未经授权，禁止复制转载。【版权所有，侵权必究】

• Redux 入门教程（一）：基本用法
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ang.net原创内容，盗版必究。
• React 实践心得：react-red转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ux 之 connect 方法详解
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ang.net【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netang.net【作者：唐霜】
• 使用真正的 Redux 和 React-本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。redux
【关注微信公众号：wwwtangshua【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ngnet】本文作者：唐霜，转载请注明出处。【作者：唐霜】

2017-10-02 8470 React, Redux