Redux三部曲之曲一《还阔以》

背景

我：您好！我对此职位感兴趣，能够聊聊吗？
招聘者：您好！感谢关注。方便发一份您的简历吗？

几分钟后。。。

招聘者：请过用过react吗？
我：只看过一些项目，没有实战开发过。

招聘者至今杳无音信，再后面跟招聘者聊天基本上都问是否用过react

卧薪尝胆

最近在学习react，记得刚从vue的战场上厮杀回来，就发现已经跟时代脱轨了。不过幸亏，两个框架思想差异不是很大，看起来也没有那么的吃力，以前花了一些时间学习了react的语法以及一些简单使用。想学习下react全家桶中的redux，恰好看到了阮一峰老师的redux入门文章，受益不浅。因而跟你们一块儿分享下学习的心得，这个是阮一峰老师的原文文章。

关于Redux

大佬的文章中解释了rudex何时须要不需取用.可是，因为，我是学习，即便知道本身如今目前用不上，可是仍是要去搞，要否则须要的时候就书到用时方恨少了[hahaha]。所以，这里我就不跟你们说reudx这个你们伙何时要用了，感兴趣的骨子们能够移步大佬文章哈。
redux是一种设计模式（一种行之有效的解决方案，一种解决问题的模板）。它是用来管理状态的，就像数据库，用来管理数据，数据进行能够对一系列的操做。咱们全部须要共享的状态均可以用过redux来进行操做。官方的解释是：‘是javascript容器，提供可预测化的状态管理。可让你构建一致化的应用，运用于不一样的环境，而且易于测试’

进入rudex

先构建一个react项目，直接上手，边学边作，这里是经过一个简单计数器的应用让你们感觉到rudex在项目上如何去应用

create-react-app redux-counter

再引入redux

yarn add redux

把准备工做作完了之后，咱们就要想了，以前咱们说过咱们要把全部状态都放在rudex里面，可是怎么作呢。Redux给咱们提供了一个store来存储状态，整个应用store是惟一的
Store有如下用法：

• 提供应用须要的state，是一个容器
• 提供getState()方法获取state
• 提供dispatch(action)方法获取state；
• 提供subscribe(listener)注册监听器

如今咱们先能够先没必要对这些东西有很清楚的了解，只须要知道有这些东西就能够，由于'贫穷会限制咱们的想象'。若是咱们知道了有，后面有困难就知道好像有东西能够解决。若是咱们什么都不知道，那么代码写起来就会一筹莫展，就算百度都不知道怎么去表达咱们想要的答案。那么听我娓娓道来。
在咱们刚才构建的src目录下的index.js文件下修改下代码

//增长的代码
import { createStore } from 'redux';
import counter from './reducers';
const store = createStore(counter);
//修改的代码
ReactDOM.render((<div>
  { store.getState() }
</div>), document.getElementById('root'));

createStore是redux提供提供的函数用来生成store，它接收对store进行处理的reducer做为参数，reducer咱们先不说，稍后再讲。
咱们如今用counter代替下，counter如今就是处理这个计数器的函数，待会儿咱们会在src下建一个reducers文件夹里面会暴露出counter这个函数。咱们在render中让view层显示获取到state经过 store.getState()
那么咱们在src下新建一个reducers文件夹，里面新建一个index.js文件,代码以下：

export default (state = 0, action) => {
    console.log(action.type)
    switch(action.type) {
      case 'INCREMENT': 
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state; 
    }
  }

这里提供状态，提供能够被action计算的状态，视图与状态一一对应。
Redux首次执行时，state为undefined，此时咱们能够借机设置并返回应用初始的state，所以这里咱们用state=0 来初始化状态，在这里咱们初始化状态直接在函数参数中经过（state=0）,这是很差的作法，后面咱们会把初始状态定义给一个常量，这里咱们就先这样写。
而后经过action来改变状态，当咱们在判断action的时候每每用switch进行操做。但咱们用户要操做数据的时候，就会触发action。
到这里运行下项目，咱们即可以看到界面上出现了一个'0'.
接着往下，咱们再来写一个用户操做的组件Counter,在components下新建一个Counter.js

import React,{ Component } from 'react';

class Counter extends Component {
  render () {
      const { value,onIncrement,onDecrement } = this.props;
      return (
          <div>
              Clicked: { value } times
              <button onClick={ onIncrement }>{ '+'}</button>{ ' '}
              <button onClick={ onDecrement }>{'-'}</button>
          </div>
      )
  }
}

export default Counter;

咱们想实现能加能减。待会儿咱们就须要在父组件中把两个方法以及state传递过来。
src下的index文件更改成以下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore }   from 'redux';
import Counter from './components/Counter'
import counter from './reducers';

const store = createStore(counter);
const rootEl = document.getElementById('root')
const render = () => {
    ReactDOM.render(<Counter value={store.getState()} onIncrement={() => store.dispatch({
        type: "INCREMENT"
    })}
    onDecrement={() => store.dispatch({
        type: 'DECREMENT'
    })}
    />,rootEl)
}
render();
store.subscribe(render)

serviceWorker.unregister();
//单独构建状态树,状态是跟UI统一的

在这里咱们又两个陌生的api。dispatch和subscribe.
dispatch，寓意为派遣。若是咱们state里面的状态要改变，咱们就必需要经过store.dispatch方法。这是View发出Action的惟一方法。没有规矩就不成方圆，这个状态是你们共享的，所以任何组件想要改变它，这都是惟一途径.它接收一个action。若是须要详解了解dispatch如何经过action触发reducer，能够看下源码。

store.subscribe(),在这里，store容许咱们设置一个监听函数，何为监听，就是state改变了，我view要作出改变，这才是MVVM。在React中，咱们就监听render方法，只要state改变了，render就帮你把页面从新渲染。另外store.subscribe()方法会返回一个函数，咱们若是要解除监听，就能够调用这个函数。作法以下：

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

到这里咱们就已经完成了一个redux的小应用

总结

redux其实就三大概念。reducer、action、store
咱们先说action，action其实最简单了，就是一个集中便签，用来管理actionsTypes，store.dispath的时候就告诉action你要干吗。
接下来就是reducer了，经过actio获得的操做，reducer就来执行相应的操做，并把最终的数据再给store。那么store，很显然，他把action和reducer联系起来了，并且他还提供方法给咱们操做数据，给视图提供数据
这里有此次实践的源码，有须要的能够采之
未完待续...
* 小生才疏学浅，大三学徒一枚。文章中定有许多不严谨之处或是不正确的理解，还望大佬们不吝指教。同时也但愿大佬能分享一些本身关于这一块以为不错的干货连接。