react-redux-同步

npm install --save react-redux
import {Provider} from "react-redux"
在根组件（Router）最外层加上一个Provider容器
<Provider store={store}></Provide>这样所有的组件都能访问到store了
容器组件——import {connect} from "react-redux";作用，把UI

----------------------------------获取状态（第一个返回值）--------------------------------------

 1 import React ,{Component} from "react";
 2 import {connect} from "react-redux";//
 3 class Navbar extends Component{
 4 
 5 constructor(props) {
 6 super(props);
 7 }
 8 
 9 
10 render(){
11 return <div>
12 Navbar--{this.props.title2}
13 </div>
14 }
15 }
16 
17 export default connect(
18 (state)=>{
19 return {
20 title2:state.kerwintitle
21 }
22 }, // mapStatetoProps 将store中的状态映射成属性，在redux中，我们请求回来的数据需要赋给state中的状态，然后访问，在这里，直接this.props.title就可以了
23 null
24 )(Navbar);

-----------------------------------------发送状态（第二个参数）------------------------------------

 1 import React ,{Component} from "react";
 2 import axios from "axios";
 3 import {connect} from "react-redux"
 4 import action from "./action";
 5 // import store from "../../store"; //引入store
 6 class Detail extends Component{
 7     constructor(props) {
 8       super(props);
 9     
10       this.state = {
11           filminfo:null
12       };
13     }
14 
15     render(){
16         return <div>
17             {
18                 this.state.filminfo?
19                 <div>
20                     <img src={this.state.filminfo.cover.origin}/>
21                     <h2>{this.state.filminfo.name}</h2>
22                 </div>
23                 :null
24             }
25         </div>
26     }
27 
28     componentWillMount(){
29         //获取路由参数
30         console.log(this.props.match.params.id);
31 
32         axios.get(`/v4/api/film/${this.props.match.params.id}?__t=1540450246836`).then(res=>{
33             this.setState({
34                 filminfo:res.data.data.film
35             })
36 
37             // //dispatch action 到 store 中
38             // store.dispatch({
39             //     type:"changetitle",
40             //     payload:res.data.data.film.name
41             // })
42             this.props.Title(res.data.data.film.name)
43         })
44     }
45 }
46 
47 export default connect(
48     null,
49     action
50     // mapDispatchtoProps, 把父组件connect 中的dispatch 方法 映射一个属性 传给子组件
51 )(Detail);

----------------------------------action----------------------

 1 const action =   {
 2         Title(data){
 3             return {
 4                 type:"changetitle",
 5                 payload:data
 6             }
 7         },
 8 
 9         a(){
10 
11         },
12 
13         b(){
14 
15         },
16 
17         c(){
18             
19         }
20     }
21 
22 
23 export default action;

------------------------------------------------------

 

转载于:https://www.cnblogs.com/yangxueyou/articles/9876686.html