Redux的出现是为了解决state里的数据问题。在React中，数据在组件中是单向流动，数据从一个方向（父组件）流向另一个方向（子组件props），由于这个特征两个非父子关系的组件通讯就比较麻烦
http://cn.redux.js.org/docs/introduction/CoreConcepts.html保存一下文档的眼
那么Redux的概念啊什么乱七八糟的就不写了，官网都有介绍，如果你有vuex基础学起来会稍微得心应手，毕竟vue是借鉴Ag跟react的
那么初始化的逻辑流向大致就是如下：
组件——>reducer——>state——>其他组件
组件 （dispatch 发送命令 action）——>reducer （管理者/处理器，接收action，OK开始处理）——>state（change state）——>组件（订阅state，发现change了，改变state）
另外一种表现形式
User————>Event（事件）————>view( UI )————>actions————>store（reducer管理作出state变化）————>view（渲染UI）
概念什么的可以查阅上方的URL，自己也是刚刚学习，理解没那么深，慢慢的一步步使用，今天写个很基础的使用
需要注意的几个方法
提供 getState() 方法获取 state
提供 dispatch(action) 方法更新 state（此处需要一个reducer管理事件）
通过 subscribe(listener) 注册监听器
npm install redux -S
在此之前 我们首先编写一个样式，就是万恶的递增递减效果，复制下面的代码就行
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import './assets/css/App.css'
class App extends Component {
constructor(props){
super(props)
this.state={
}
}
render() {
return (
<div className='app'>
<span>1</span>
<span className='btn' >Increase</span>
<span className='btn' >Decrease</span>
</div>
);
}
}
export default App;
注意一下你的css路径就行
App.css
.app{
width: 100%;height: 100px;text-align: center;font-size: 40px;font-weight: 900
}
.btn{
display:block;width: 300px;height: 60px;line-height: 60px;text-align: center;margin: 0 auto;background: blanchedalmond;cursor: pointer;border-radius: 10px;margin-bottom: 30px
}
.btn:nth-child(2){background: salmon}
效果还是非常好看的（
^_^）
之前建议过安装一下这个插件，没有安装的可以安装一下
安装好之后编写一个reducer，管理这个状态
安装好插件之后 直接输入rrd 回车即可
export default (state =0, action={}) => {
switch (action.type) {
default:
return state;
}
};
给他设置一个默认值，先放着
接着来到index.js，就是最顶级的大哥，编辑一下APP.js就好了
第一步 引入createState import { createStore } from 'redux'
第二步引入 刚才的文件 import reducer from './reducer/counter'
第三步store初始化 `const store = createStore(reducer)
接下来给他设置监听函数
监听使用subscribe函数，文档上面也有示例，这里我们简单写个监听
那么如何触发这个监听，就是dispatch方法
store.subscribe(()=>{
console.log('State Change',store.getState())
})
store.dispatch({
type:'INCREMENT'
})
OK，直接这样既可，那么reducer就能监听到传输的type，就可以根据这个type做出相应的行为
回到reducer下面的counter.js 文件
export default (state =0, action={}) => {
switch (action.type) {
case 'INCREMENT':
return state+10
default:
return state;
}
};
此时我们刷新一下页面
成功触发了 监听函数并且得到了reducer返回的state数据，OK 接下来就很简单了,把dispatch写成方法传递过去
`
store.subscribe(()=>{
console.log('State Change',store.getState())
})
ReactDOM.render(<App value={store.getState()} onIncrement={()=>{
store.dispatch({
type:'INCREMENT'
})
}} />,document.getElementById('root'))
在App中接收props
可以看到state已经更新了但是我们的视图并没有渲染，如何重新触发渲染呢，将模板的render封装成一个函数，使用subscribe监听
此时已经可以触发效果了，这是最基础的使用，多敲几遍吧，递减效果也是照搬的
