Day 27 Redux 接入 component

第 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
  }
}