redux里的問題：

1、組件中出現了大量的store對象
2、 在redux里，凡是使用state里數據的組件，必須加上 store.subscribe() 函數，否則，數據不是響應式的

react-redux的API

1.Provider

<Provider/>組件：可以讓組件拿到state（不需要使用傳統(tǒng)的subscribe（）來監(jiān)聽state重繪組件）

import {Provider} from "react-redux";
import store from './redux/store'

ReactDOM.render((
    <Provider store={store}>
        <App/>
    </Provider>
), document.getElementById('root'));

2.connect():

鏈接 ，（返回值）是個高階組件，用來鏈接react組件和redux（組件狀態(tài)要從redux中獲取）
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
功能：把store和react組件聯系在一起。只要store發(fā)生了變化就會調用mapStateToProps方法。Connect方法就是個高階組件。

參數1：mapStateToProps是個函數，

功能: ** 把倉庫里的state合并到props里。給mapStateToProps函數傳入所有state，它返回指定的state數據（需要合并到組件props中的state）。返回的state與組件的 props 合并*（聯系的體現）***。所以，當store發(fā)生變化時，mapStateToProps方法就會更新組件里的props，那么組件就更新了（因為props變了）。
參數：
state：所有的state
返回值：
經過處理后的state（組件里需要的state）。
示例代碼：

const mapStateToProps = (state) => {
                          return ({
                             name: state.addName //name屬性會和組件的props合并。
                          })
                    }

參數2：mapDispatchToProps函數

功能：
把dispatch和props聯系起來。傳入dispatch，返回綁定好的action方法。
更改數據必須要觸發(fā)action，所以，mapDispatchToProps把 action 作為組件的props 進行綁定（聯系的體現）,要派發(fā)的函數名，可以是多個函數。mapDispatchToProps 就是用于建立組件跟store.dispatch的映射關系。
參數：
dispatch: 派發(fā)
ownProps:當前組件的props，即使用標簽時，傳入的props
返回值：
對象：表示所有dispatch的對象
示例代碼：

const mapDispatchToProps = dispatch  => ({
           addNameCreater: () => dispatch(actions.addNameCreater())
})

示例代碼：

export default connect( mapStateToProps,  mapDispatchToProps )(組件名)

react-redux的思路：

1）、用Provider包裹最頂層的組件，提供一個store屬性。這樣redux任何組件里都可以使用store了。
2）、使用connect()函數來鏈接react的組件和redux的store。記?。篶onnect不能單獨使用，必須要有Provider

最佳實現

//安裝：npm install --save react-redux

//1、主入口文件 index.js
import {Provider} from react-redux
import store from './plugins/redux'

<Provider store={store}>
  <App/>
</Provider>
  


 //2、容器組件里：App組件
import {connect} from "react-redux";
 
class App extends React.Component {
  add(){
    //直接用props來調用dispatch，而不需要store
    this.props.dispatch({
      type:"INCREMENT",
      payload:2
    });
  }
    
  render = () => (
     <div className="App">
        <p>{this.props.count}</p>  //  使用props可以直接拿到state里的數據,而不需要store
        <input type="button" value=" 加 " onClick={()=>this.add()} />
     </div>
   )    
}




 //容器組件對外開放時，（把redux里的state轉到props） 
export default connect((state)=>{
  return {
    count :state.count    
  }
})(App);

在react-redux里，把組件進行拆分（容器組件和UI組件）
容器組件：處理業(yè)務邏輯，有狀態(tài)（在redux里存放）組件
UI組件：只做展示，就是無狀態(tài)組件