react-redux 的使用*（2018/12/17）
一、Redux与组件
react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构
React-Redux提供connect方法,用于从UI组件生成容器组件，connect的意思就是将两种组件连起来
安装语句 cnpm i react-redux --save
二、react-redux的基本用法
(1)、引入
import {Provider} from "react-redux";
在根组件外层嵌套一个Provider. Provider的作用就是将store传递给每一个子组件，每一个子组件就都可以使用store了，不需要重复的在组件中引入store
(2)、connect进行连接
1️⃣在子组件中引入connect
import { connect } from "react-redux";
2️⃣进行连接
export default connect(mapStateToProps，mapDispatchToProps)(组件名称)
connect()():
第一个括号里面有2个参数
第一个参数：mapStateToProps
解释：
mapStateToProps其实就是一个规则，把store里面的state映射到当前组件的 props中
第二个参数：mapDispatchToProps
解释：
(1)、mapDispatcherToProps 这个方法用来修改数据，这个方法中有一个参数为dispatch.
(2)、如果说mapStateToProps是将store的数据拿到当前组件使用,那么mapDispatcherToProps就是提供了一些方法让你如果进行数据的修改(方法需要自己去写， 依旧要把action返回给Store)，这个方法被映射的this.props中。dispatch是用来发送action的
第二个括号:需要传递组件名称
mapStateToProps这个函数的主要用途就是将state中的items数据映射到prop中的items中去，简单来说就是我们调用公共的数据store。但是频繁的在组件中引入store操作过于麻烦，因此我们将当前list组件进行了一个数据连接，这个数据就是从store中的state映射到props中
mapStateToProps
作用：
建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染
调用的时候this.props.【key值】
mapDispatchToProps
作用：
用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象
mapDispatchProps的用法
const mapDispatchProps = (dispatch)=>({
函数名称:function(){
dispatch(action)
}
})
mapDispatchProps函数需要返回出去一个函数 这个函数中用dispatch传递一个action
最终子组件变成了UI组件 connect返回最终的容器组件，react-redux建议我们把所有的数据都放在store中
调用：this.props.函数名称()
三、例子
App.js
import React,{Component} from 'react'
import {HashRouter as Router,Route,Link,NavLink,Switch,Redirect} from "react-router-dom";
import store from './store'
import Home from './components/home/home'
import List from './components/List/list'
import My from './components/My/my'
import Order from './components/Order/order'
import "./common/css/footer.css"
import {Provider} from "react-redux" //Provider的作用就是将store传递给每一个子组件，每一个子组件就都可以使用store了，不需要重复的在组件中引入store ,provider只能有一个children
console.log(Provider)
class App extends Component{
render(){
return(
<Provider store={store}>//应用store
<Router>
<div>
<switch>
<Route path="/home" component={Home}/>
<Route path="/list" component={List}/>
<Route path="/order" component={Order}/>
<Route path="/my" component={My}/>
<Redirect path="/" to="/home" />
</switch>
<div id="footer">
<ul>
<li>
<NavLink to="/home">首页</NavLink>
</li>
<li>
<NavLink to="/list">列表</NavLink>
</li>
<li>
<NavLink to="/order">订单</NavLink>
</li>
<li>
<NavLink to="/my">我的</NavLink>
</li>
</ul>
</div>
</div>
</Router>
</Provider>
)
}
}
export default App
index.js
import {createStore} from 'redux'
import reducer from "./reducer"
const store = createStore(reducer);
export default store
home.js
import React,{Component} from 'react'
import {connect} from "react-redux" //connect进行连接 在子组件中引入connect
class Home extends Component{
render(){
let {num} = this.props //从props中引入数据
return(
<div>
<h2>{num}</h2>
<button onClick={this.props.handleAddNum.bind(this)}>增加</button>
</div>
)
}
}
const mapStateToProps = (state)=>({ //mapStateToProps其实就是一个规则，把store里面的state映射到当前组件的 props中
num:state.n
}
})
const mapDispatchToProps = (dispatch) =>({ //mapDispatcherToProps 这个方法用来修改数据，这个方法中有一个参数为dispatch. 你如果要进行数据的修改(方法需要自己去写，依旧要把action返回给Store)，这个方法会被映射到this.props中。dispatch是用来发送action的
handleAddNum(){
let action = {
type:"ADD_NUM"
}
dispatch(action)
}
})
export default connect(mapStateToProps,mapDispatchToProps)(Home) //第二个（）中写当前组件的名称
reducer.js
const defaultState = {
n:0
}
export default (state = defaultState,action)=>{
switch(action.type){
case "ADD_NUM" :let addNumber=JSON.parse(JSON.stringify(state));
addNumber.n++
return addNumber
}
return state
}
