redux|redux+react-redux基本介绍+使用案例(一) redux|react

其实，redux和react并没有半毛钱的关系，redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。
1.创建项目

create-react-app redux-demo

2.安装redux

npm install redux --S

【redux|redux+react-redux基本介绍+使用案例(一)】3.安装react-redux

npm install react-redux --S

首先来介绍一下：
action：行为它是一个对象里面必有type来指定其类型这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。

reducer：可以理解为一个专门处理state的工厂给他一个旧数据它会根据不同action.type返回新的数据，每个项目有且可以有多个reducer。记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的。

store： store本质上是一个状态树，保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store。（使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法）

提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;

案例：

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider, connect } from 'react-redux'; class App extends Component { render() { const { PayIncrease, PayDecrease } = this.props; return (当月工资为{this.props.tiger} ); } }const tiger = 10000//这是action const increase = { type: '涨工资' } const decrease = { type: '扣工资' }//这是reducer const reducer = (state = tiger, action) => { switch (action.type) { case '涨工资': return state += 100; case '扣工资': return state -= 100; default: return state; } }//把reducer放到createStore里，并创建store const store = createStore(reducer); //需要渲染什么数据 function mapStateToProps(state) { return { tiger: state } }//需要触发什么行为 function mapDispatchToProps(dispatch) { return { PayIncrease: () => dispatch({ type: '涨工资' }), PayDecrease: () => dispatch({ type: '扣工资' }) } }//连接组件，通过connect将export default App修改为 export default connect(mapStateToProps)(App); 即可通过this.props 获取到store中数据 App = connect(mapStateToProps, mapDispatchToProps)(App)ReactDOM.render(, document.getElementById('root') )

Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说当你用Provider传入数据后，下面的所有子组件都可以共享数据，十分的方便。
Provider的使用方法是：把Provider组件包裹在最外层的组件，如代码所示，把整个APP组件给包裹住，然后在Provider里面把store传过去。注意：一定是在Provider中传store，不能在APP组件中传store。
connect：它是一个高阶组件所谓高阶组件就是你给它传入一个组件，它会给你返回新的加工后的组件，注重用法倒简单，深究其原理就有点难度。这里不做connect的深究，主要是学会它的用法，毕竟想要深究必须先会使用它。首先它有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])，后面两个参数可以不写，不写的话它是有默认值的。我们主要关注下前两个参数mapStateToProps和mapDispatchToProps。
connect的使用方法是：把指定的state和指定的action与React组件连接起来，后面括号里面写UI组件名。
除此之外demo中还多出了mapStateToProps mapDispatchToProps 他们又有什么作用呢？通俗一点讲的话就是：
比如你在一个很深的UI组件里当你想要获得store的数据就很麻烦。mapStateToProps就是告诉store你需要哪个state，需要什么数据就直接在mapStateToProps中写出来，然后store就会返回给你。同理，如果你想要dispatch派发一些行为怎么办呢，mapDispatchToProps就是告诉store你要派发什么行为，需要派发什么行为就在mapDispatchToProps中写出来，然后store就会把你想要派发的行为告诉reducer，接下来大家都应该知道了 reducer就会根据旧的state和action返回新的state。