Redux的几个方法
我们首先从redux的几个方法api开始学起，当然如果你不知道为什么有redux，那么你也没必要去学习，当你在react项目中使用redux的时候我们会觉得很爽，因为在这种组件式开发中，我们经常会遇到跨组件的传值，包括跨页面也会进行值的传递，那没有任何东西比redux去做状态保存更爽了，所以redux是个很好用的东西，所以现在我想去实地的去学习下redux这个库。
提示： 网上有很多关于redux的教程，我不会教大家怎么去创建redux的文件夹，我只是去分享我写源码和学习的一个过程，而且我第一次写文章，不好大家多多包含！
这是redux githup地址：redux地址,当然也有我自己写的源码学习的githup地址,这里面有我一些代码的注释
- createStore
首先这是一个函数，然后这个函数导出几个参数（只说几个比较重要一点的），分别是
- getState： 用来返回内部的state状态值;
- subscribe: 用来添加监听函数;
- dispatch： 用来调用外部传入的action，同时触发监听的函数;
然后我们再来解释这个函数干的工作，他首先接受外部传入的reducer(action生成器)和preState(初始状态);
至于什么是action？他用来干嘛的？为什么要有？
//首先它是一个简单对象
let incrementAction = {
type: 'INCREMENT',
data: 1,
}
//不管你后期多么高级中间价处理之类的，最终他都会变成这样子，所以他就是简单对象，用来告诉redux我的类型是增加数值，且我的增加值是1
那reducer是啥玩意呢？
//reducer就是一个函数，接受一个初始值和action，然后根据action的类型做不同的处理，仅此而已，这就是他的工作
//这个action就是刚刚那个action
function(state ={number:0},action){
switch (action.type) {
case 'INCREMENT':
return {...state,number:state.number + action.data}
default:
return state;
}
}
//那这个函数就返回了一个新的state，那我们在应用中就可以通过state获取新的值了
那我们现在去写我们的createStore方法把；
function createStore(reducer, preState){
let state = preState;
// 刚刚我们提到了subscribe函数，这个就是很简单的一个发布订阅模式，不做多解释
let listeners = [];
function getState(){
return state;
}
function subscribe(fn){
listeners.push(fn);
//返回一个取消监听的方法
return function(){
listeners = listeners.filter(v => v !==fn);
}
}
// 调用一次确保第一次的时候有初始状态
dispatch({type:'first-dispatch00'})
// 之前我不知道为什么有这个，因为我们有时候并不会去传入原始值，所以
function dispatch(action){
// 接受一个state和action，返回处理后的state
state = reducer(state, action)
//渲染执行注册过的事件
listeners.forEach(fn => fn());
}
return {
getState, subscribe, dispatch
}
}
到现在为止我们写完的第一个redux函数组件，那我们现在创建一个react组件Counter.js
import React,{Component} from 'react';
import PropTypes from 'prop-types';
const store = createStore(reducer,{});
//下面为什么可以通过getState可以拿到number值啊，我明明传入的是一个空对象，但是别忘了我们刚刚的
//reducer是不是传入了一个初始值，然后我们是不是在createStore内部是不是已经调用了一次disptach
//然后返回了一个state ={number:0}
class Counter extends Component{
state = {
number: store.getState().number,
}
componentWillMount(){
this.unsubscribe = store.subscribe(()=>{ this.setState({number: store.getState().number })})
}
componentWillUnmount(){
this.unsubscribe();
}
//action就是刚刚我们定义的action
render(){
const { number } = this.state;
return (
<div>
<h4>{number}</h4>
<button onClick={()=>{ store.dispatch(action) } }>加</button>
</div>
)
}
}
export default Counter;
然后我们第一个关于redux的应用就搞定了，大家可以去试一试；
这是redux的第一个函数，当然还是有很多的漏洞和优化的地方，但是今天就先写到这，如果大家觉得还行的话可以继续，哈哈，后面还有combineReducer，bindActionCreator，还有react-redux的connect组件和Provider组件对于react的应用的优化；
