第 27 天 !

昨天我們把 redux 給接入到我們的專案上，

那今天試著把 store 的 state 給導入到我們的 component 裡，

那我們要如何取得 store 的資訊呢？

在 redux 裡， 我們是不能直接的去存取 store 的資料，

所以我們必須去用間接的方式去取得我們想要的資訊，

首先，我們先使用 redux 提供的 connect ，

connect

connect 會幫我們去連接 store ，並且讓我們設定要提取哪些資料跟 action

connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

• mapStateToProps?: Function
• mapDispatchToProps?: Function | Object
• mergeProps?: Function
• options?: Object

用法：

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component);

mapStateToProps

當我們希望從 store 上獲取 state 時，就需要去設定 mapStateToProps ， 格式是 function，

它會導入 store 的 state ， return 的值，會被當成 props ， 傳給指定的 component，

只要 store 發生變化，就會觸發這個 function

like:

const mapStateToProps = (state, ownProps) => {
  return {
    ...state,
  };
};

當返回值發生變化的話， 就會觸發 re-render，

如果，mapStateToProps 沒有設定， 那 store 的變化，將不會影響到這個 component

mapDispatchToProps

在 redux ， dispatch 是無法隨意引入的，要引入必須從 mapDispatchToProps ，

它會提供 dispatch 來讓我們導入 action

格式是 function ：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    action: (payload) => {
      dispatch(actionCreator(payload));
    },
  };
};

格式是 object:

const mapDispatchToProps = {
  actionCreator: (payload) => ({
    type: '',
    payload,
  }),
};

有兩種綁定方式， 一種是 function ，一種是 object ，

function 比較屬於客製化， 就是說假如還想在裡面加上額外邏輯，那就選用 function ，

最後都會把我們設定的當做 props 傳入 component

export default function Home({ action }) {
  return <div className={cls.root}></div>;
}

假如沒有，其實可以考慮傳入 actionCreator ， connect 會幫你自動綁定 dispatch

最後假如不設定，最後會把 dispatch function 當 props 傳入，

export default function Home({ dispatch }) {
  return <div className={cls.root}></div>;
}

mergeProps

redux 相關的參數都會是 props 傳遞， 那如何跟 component 的 props 做合併，那就必須要去考慮順序，

原本的順序是：

• stateProps
• dispatchProps
• ownProps

那我們可以根據我們的需求，去調整這部份，

格式是：

function mergeProps(stateProps, dispatchProps, ownProps) {
  return {
    ...stateProps,
    ...dispatchProps,
    ...ownProps
  }
}