15分钟学会在React中使用Redux

React作为一套优秀的前端框架，为我们提供了一套十分优秀的页面构建方法和思想。可是，React还只是一套视图构建框架，在软件设计模块里面还只是MVC的View层，涉及数据模型时需要一些其他框架的辅助。其中，最著名的莫过于Redux了。既然是结合React使用Redux，那么前端大爷假设你已经使用过React框架，对React有一定的了解了，并且大概知道action, reducer, dispatch的关系，否则请先移步其他书籍文档，因为无论如何15分钟内不可能从不会走到学会跑。

-----------------------------------分割线 0 分钟---------------------------------

先解释原理

首先，React组件有state, props没错吧。state是内部的状态，props是父组件传进来的属性，state, props变化了要触发react diff并且调用render方法更新组件，同意吧。好，就是这么简单的react基本原理，告诉我们除了用户交互导致内部state变化外，数据流是从父组件通过props流向子组件导致子组件更新。这就是React的单向数据流：

            自顶向下单向数据流！
            
            自顶向下单向数据流！
            
            自顶向下单向数据流！

重要的事情说三遍。

假设我们的app入口是这样的：

ReactDOM.render(
    
    document.getElementById('root')
);

这个App也是一个React组件，它是我们的项目中居于最顶层的父组件。如果我们有某个组件，他能够提供数据源，而又居于App之上，那么数据就可以源源不断的从它往下流到App以及各级子孙节点上去。所以Redux给我们提供了Provider:

import { Provider } from 'react-redux'


ReactDOM.render(
    
        
    , 
    document.getElementById('root')
);

-----------------------------------分割线 5 分钟---------------------------------

Provider接受一个属性store，这就是我们全局的数据store。我们要根据reducer函数来创建它。

import { createStore } from 'redux'
import { combineReducers } from 'redux'


//reducer函数接受两个参数，state和action，state带默认的初始值
function reducer1(state = [], action) {
    switch(action.type) {
        case 'add':
            return [...state, 'apple is very delicious'];  // 这里一定要返回一个新的数组，而不能写成state.push('apple is very delicious1');
            
        default  :
            return state;  
    }
}

//reducer当然可以定义多个，不同的reducer对应着不同的state对象，上面的reducer1操作一个数组对象，这个reducer2操作一个Number类型state
function reducer2(state = 0, action) {
    switch(action.type) {
        case 'increase' :
            ++state;
            return state;
        default:
            return state;    
    }
}

const reducer = combineReducers({
    reducer1,
    reducer2
  })

var store = createStore(reducer);   

store生成了，随时可以通过store.getState()获得当前store的值。初始状态下调用getState()获得的返回值是

{reducer1: [], reducer2: 0}。

看，reducer函数的名字对应着store里面state的名字。

为了帮助初学者学习，可以添加以下语句，监听每一次dispatch操作后store的状态：

store.subscribe(()=>{
    console.log(store.getState());
})

-----------------------------------分割线 10 分钟---------------------------------

现在我们有了最高级别的Provider，并定义好了reducers, 传入了store。接下来我们该考虑子组件了。子组件长什么样，要靠父组件给的props决定，可是数据都在最高级别的provider store里面，怎么样把store里面的数据拿出来作为props给子组件呢！！？？

react-redux给我们提供了魔法黑科技:mapStateToProps和mapDispatchToProps。

顾名思义，把state和dispatch从store里面拿出来，作为props传给子组件！

const mapStateToProps = state => {
  return {
    state1: state.reducer1
  }
}

const mapDispatchToProps = dispatch => {
  return {
    add: () => {
      dispatch({
        type:'add'
      })
    }
  }
}

class AppView extends Component {

  render() {
    const list = this.props.state1.map(v=>{
      return (
{v}
)
    })
    return (
      

        
{list.length}
        {
          list
        }
        
        this.props.add()}>add
      
    );
  }
}


const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(AppView)
export default App;

看到了吗，经过mapStateToProps和mapDispatchToProps处理后，我们直接在子组件AppView里面使用this.props.state1就可以拿到store里面的数据，直接使用this.props.add就可以dispatch相应的action。store变化后视图的更新是自动的，无需手工干预。

源代码见：https://github.com/myairforce1/simpleReduxDemo

看到这你是不是对在React中使用Redux有点感觉了呢？请原谅本文使用了一个极为简陋的例子。本着老少咸宜，童叟无欺的初衷，我尽量搬上来一个功能少，但是好理解的例子。如果的确帮助到您，请留下您对本文的喜爱。

-----------------------------------分割线 15 分钟---------------------------------