useSelector & usedispatch

使用 useSelector 和 usedispatch 替代 connect

使用 useSelector 来获取 state，使用 usedispatch 的实例对象来发出 action

const initToggle = { title: 'toggle标题', show: true }
const toggle = (state = { ...initToggle }, action) => {
  switch (action.type) {
    case 'ON_SHOW':
      return { ...state, show: !state.show }
    case 'UPDATE_TITLE':
      return { ...state, title: action.payload }
    default:
      return state
  }
}
export default toggle

const Dome2 = () => {
  const { show, title } = useSelector(({ toggle }) => ({
    show: toggle.show,
    title: toggle.title,
  }))
  const dispatch = useDispatch()
  return (
    <div>
      {show ? <div>{title}</div> : ''}
      <button onClick={() => dispatch({ type: 'ON_SHOW' })}>显示/隐藏</button>
      <button
        onClick={() => {
          dispatch({ type: 'UPDATE_TITLE', payload: '修改之后的title' })
        }}
      >
        修改title
      </button>
    </div>
  )
}