react-redux

一、什麼是react-redux

React-Redux是Redux的官方React綁定。 它允許您的React組件從Redux存儲中讀取數據，並將操作分派給存儲以更新數據。
它由二個重要的部分組成，一個是<Provider />組件，另一個是connect()是react-redux提供的一個柯里化的函數, 用於連接redux

二、學習網址

https://react-redux.js.org/docs/getting-started react-redux官網

三、如何使用

npm install --save react-redux 安裝
import { Provider } from 'react-redux' Provider 的引入
import { connect } from 'react-redux' connect的引入

四、關於Provider

Provider是react-redux提供的一個組件，把這個組件包在最外層，這個組件接收一個參數，就是store， store是通過redux提供的createStore方法創建的。任何一個內部組件，需要用到store裏的state或者其它就直接通過connect一下即可。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';

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

五、關於connect

connect有兩個括號， connect有兩個括號，第一個括號傳mapStateToProps和mapDispatchToProps，用於把這兩個方法的返回值注入到當前組件的props, 第二個括號爲當前組件。

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect的第一個括號也可以直接傳(mapStateToProps, actionCreators), actionsCreators裏的每個creator就會被映射到組件的props上，並且，這些creators就自動具備了dispatch的功能

export default connect(mapStateToProps, { add, reduce, addAsync })(Counter);

mapStateToProps：
意思是把store裏的state遷移到當前組件的props上，返回一個對象

// mapStateToProps，意思是把store裏的state遷移到當前組件的props上，返回一個對象
const mapStateToProps = (state) => {
  const {
    count,
    isLoading
  } = state.cart;
  return {
    count,
    isLoading
  }
}

mapStateToProps：
意思是把actionCreator裏創建的action dispatch，並且做爲一個方法映射到當前組件的props上，返回一個對象. 可以不這樣用

const mapDispatchToProps = (dispatch) => {
  return {
    reduceCount: () => {
      dispatch(reduce())
    },
    addCount: () => {
      dispatch(add())
    }
  }
}