React-Redux知识点

两个重要部分：
1、Provider:这个组件能使你整个app都能获取到store中的数据。包裹在组件的最外层，使所有组件都能拿到store。接收store作为props，然后通过connect往下传递，这样react中任何组件都可以通过context获取到store。
2、connect:这个方法能够使你组件和store进行关联。

基本使用

react-redux还需要依赖于Redux中的store，所以还需要安装redux。
1、在src中创建reducer/index.js文件

//接收两个参数
//第一个参数是state
//第二个参数是action
InitialState={
count:0
}
export reducer =(state = InitialState,action)=>{
	switch(action.type) {
     case :"add_action":
     return (
		count:state.count+1,
)
       
     default:
        return state
} 
	
}

2、在src创建store/index.js
通过createStore方法把reducer导入进来

import {createStore} from 'redux'
import {reducer} from '../reducer'

export defult createStore(reducer)

3、app.js导入

import store from './store';
//导入Provider对div进行包裹，设置store属性
import Provide from 'react-redux'
import ComA from './pages/comA'
import ComB from './pages/comB'
function App(){
return 
(<Provider store={store}>
	<div className="App">
		<ComA/>
		<ComB/>
	</div>
</Provider>
)
}
export default App;

4、pages/comA/index.js

 class comA extends React.Component{
	 handleClick=()=>{
		this.props.sendAction()
	}
	render(){
		return(<button onclick={this.handleClick}> + </button>)
}
}
const mapDispatchtoProps=(dispatch)=>{
	return {
	sendAction:()=>{
	dispatch({
		type:"add_action",		
})
}
}
}
export default connect(null,mapDispatchtoProps)(comA)

5、pages/comB/index.js

class comB extends React.Component{
	render(){
		return(<div>{this.props.count}</div>)
}
}
const mapStatetoProps = state=>{
	return state;
}
export default connect(mapStatetoProps)(comB)

总结：connect 上两个方法
mapStateToProps 将 state 状态内容转化为 props 属性，这样组件就可以尝试获取到传递过来的属性对象了。
mapDispatchToProps组件与方法之间建立联系。