---
# System prepended metadata

title: 8.react-redux
tags: [React, Javascript]

---

# 8.react-redux
###### tags: `React` `Javascript` 
![](https://i.imgur.com/FzsTl4a.jpg)
使用react-redux，便不須再對所有頁面的render做subscribe監聽，交由容器即可。
1. connect
```
connect(
    state => {count:state},     //mapStateToProps
    {    add:increament ,
         minus:decrement     } 
    /*  mapDispatchToProps
        this.props.minus(data)返回值為一個action:
        {type:'decrement',data:data}。
        react-redux會自動幫忙做dispatch )
    */
)(UIComponent) `
```
解釋:
* 連結UI與容器 
`connect(mapStateToProps,mapDispatchToProps)(UIComponent) `
* 容器傳store中儲存的state/dispatch給UI
```
    mapStateToProps= state => {count:state}
    
    mapDispatchToProps = dispatch => ({
        fun: data=>dispatch(action(data))
    })
```
* UI再透過prop取出
`this.props.count/this.props.fun`
* 頁面渲染容器，連結store
`<Count store=""></Count>`



2. Provider
`<Provider store=""></Provider>`
置於最上層。會找出其下所有的component，並將store傳給他們。

