useSelectoruseDispatch连接 redux

react-redux 7.1之后也可以使用useSelector、useDispatch等HooksApi替代connect，减少模板代码。

# 在 redux 变更的时候触发 useEffect
# useState和[useReducer](<https://so.csdn.net/so/search?q=useReducer&spm=1001.2101.3001.7020>)是Hooks中最常用的Api，适合用来进行简单的状态管理
const a = useSelector(state => myStore.getState().a);

useEffect(() => {
        ***
    }, [a]);

import React from "react";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";
 
const initialState = { num: 0 };
 
const reducer = (state, action) => {
  switch (action.type) {
    case "decrement":
      return { ...state, num: state.num - 1 };
    case "increment":
      return { ...state, num: state.num + 1 };
    default:
    
      return state;
  }
};
 
const store = createStore(reducer, initialState);
 
const ComponentUseReactRedux = () => {
  return (
    <div>
      <h2>ComponentUseReactRedux</h2>
      <Provider store={store}>
        <ChildComponentUseReactRedux />
      </Provider>
    </div>
  )
}
 
const ChildComponentUseReactRedux = () => {
  const num = useSelector(state => state.num);
  const dispatch = useDispatch();
  return (
    <div>
      <h3>Using useSelector, useDispatch</h3>
      Number: {num}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};
 
export default ComponentUseReactRedux;