Redux和react-redux的基础使用

redux 和 react 没有关系，redux 可以用在任何框架中，redux 是一个状态管理器。
connect 不属于 redux，它其实属于 react-redux。
react-redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据
react项目中我们通常结合两者使用。
首先通过import引入两者的依赖包：

import { createStore } from 'redux';
import { Provider,connect} from "react-redux";

以上篇制作马云模拟器当做例子，代码如下：

//子组件传过来的值
let childrendata;
/*-----------具体通知描述及数据处理方法部分-------------*/
// Action通知及描述
const increaseAction = { type: 'reduce' }
// Reducer计算  基于原有state根据action得到新的state
function counter(state = { count: 279000000000}, action) {
  const count = state.count;
  switch (action.type) {
    case 'reduce'://如果接到action为increase的通知执行
      return { count: childrendata}
    default:
      return state//返回新的state
  }
}

/*-----------数据存储器部分-------------*/
// 根据reducer函数通过createStore()创建store(存储器)
const store = createStore(counter)

/*-----------映射方法及数据部分-------------*/
//  将state映射到Counter组件的props(数据)
function mapStateToProps(state) {
  return {
    value: state.count
  }
}
//  将action映射到Counter组件的props(方法)
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: function (data) {
      childrendata = data;
      dispatch(increaseAction)//定义点击方法发送action
    }
  }
}
// 传入上面两个函数参数，将Counter组件变为App组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

const Home = () => {
  return(
    <Provider store={store}>
      <App/>
    </Provider>
  )
}
export default Home

react-redux的Provider，将redux创建的store传给子组件，供调用。
子组件中执行onIncreaseClick函数，dispatch(increaseAction)，触发更新。redux中counter处理数据，返回当前最新的值。
react-redux的connect()函数将mapStateToProps和mapDispatchToProps，挂载到Counter的组件上，返回新的组件。
mapStateToProps方法将counter中定义的值映射为value传给子组件，以供调用。
mapDispatchToProps将方法传给子组件，以供调用。

项目预览地址：https://aotuotage.github.io/next-test/
代码地址：https://github.com/aotuotage/next-test