react-redux之入门篇
react-redux是reactjs一个衍生插件，在简单的一些应用中，采用state,props和context等就能解决。一旦在业务逻辑复杂时，系统复杂的情况，还是采用这三兄弟去开发，会使得代码很复杂，臃肿，维护显得捉襟见肘，很吃力。react-redux的出现显得尤为必要，可以很好的系统业务逻辑和前端ui代码给分割开，采用函数式编程,以便于维护，以一种比较轻便的桥梁的引入，使得代码更具有维护性，在复杂的业务逻辑面前，也显得轻便很多，当然这个东西具有一定复杂度，不易上手，需要配置的东西比较多，故对于这套东西，就得多练多看。
react-redux是react js状态管理工具，要想入门必须要先掌握的它的核心思想，它严格遵循了reactjs 的单向数据流的思维模式。
你首先得知道redux里面到底有哪些东西：
1.state:这个家伙跟那个基础三兄弟的中state是有区别的，在api中state是可以根据setState更改ui视图的，dom数据的变化，都需要它来完成。在redux中的state是存放在store对象中的。要变化，得问action给不给变。取出：store.getstate();
2.action：对象（{}）；曰：“在我的体内有两个属性，一个type属性，一个payload(不唯一)属性，说白了你要type来验证你是不是调用该方法，payload你需要表达什么，通过payload传达我想让它消失这样一个指令”；
2.reducer：方法（Function）；曰：‘在我的体内，你可以完成你要想完成的各种骚操作’；
代码如下：
const counter=(state =0, action) =>{
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}3.store: 它干的活就比较多，它属于大头，前面三个属于准备工作，它就要开始处理；它做哪些事，如下（摘之官网）：
3.1 维持state应用；
3.2 提供 getState() 方法获取 state；
3.3 通过 subscribe(listener) 注册监听器;
3.4 通过 subscribe(listener) 返回的函数注销监听器。
曰：‘我干最累的活，干最多的事，拿最少的工资，名利都那三个家伙给拿走啦，我不干啦，老板，我要加工资！！！呜呜呜....’;
完整的一个步骤：
调用store.dispatch(action)(我想要什么，给我寻找)
=> Redux store 调用传入的 reducer 函数(找到了，兄弟，别急，我需要处理)
=> 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树(所有的数据都归并好，兄弟,等会儿，我将它放在state)
=> Redux store 保存了根 reducer 返回的完整 state 树（兄弟，数据我已经放进state里啦，记得取一下哈）
这是一个完整的readux数据流动模式，这个思维很重要；接下来我用代码为你们分享一下，如何一步一步完成这些骚操作的；
第一步：action准备（action.js）:
function add(payload) {
return { type: 'ADD', payload }
}
function min(payload){
return{ type:'min',payload}
}
export {add,min}第二步：reducer准备，我要开始逻辑啦（reducer.js,用了combineReducers这个方法处理）：
import { combineReducers } from 'redux'
const defaultState = 0;
const reducer = (state = 0, action) => {
//console.log(action);
switch (action.type) {
case 'ADD':
//return state.concat([action.text]);
return state+action.text;
case 'min':
return state-action.text;
default:
return state;
}
};
export default combineReducers({
//reducer:combineReducers({reducer}),
reducer:combineReducers({reducer})
})ps:运用combineReducers进行对象嵌套表达；
第三步：store准备，我要将那两个家伙集中处理咯，没有，你们啥也干不成哟（store.js）：
import reducer from './reducer'
import { createStore,applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
const loggerMiddleware = createLogger();
const configureStore = (preloadedState) => {
return createStore(
reducer,
preloadedState,
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
)
}
export default configureStore();
ps:logger 插件打印日志，进行调试，可以根据自己的项目是不是需要引入；
这些工作都准备好了，我要将你们引入的我的 react应用中了，要做好心里准备，别一下子懵咯哟，我可不负责的哟；
先要提供全局的store,故在app/index.jsx中
import {Provider} from 'react-redux';
import store from 'Component/tool/store'；
render() {//render函数；
const history = createHistory()
return(
)
//return(接下来我实现了哟：（login.jsx）
import {connect} from 'react-redux';
import {add,min} from 'Component/tool/action';
//中间就可以通过this.props.add(1)调用函数，和this.props.reducer获取数据
...
const mapStateToProps = (state) =>({reducer: state.reducer.reducer, counter: state.counter})
const mapDispatchToProps = (dispatch) =>{
return{
add:payload=>{dispatch(add(payload))},
min:payload=>{dispatch(min(payload))}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Login);这样一个完整的redux配置完成，有木有被唬到，欢迎大家多多评论，互相交流，为我指出错误；
接下来一篇要为大家分享一个叫做redux-actions-----------《react-redux之提升redux-actions》
参考文档：https://www.redux.org.cn/docs/basics/DataFlow.html；