redux 练习1 单个rudecer

import { createStore } from 'redux'
import { useEffect, useState } from 'react'

const initState = {
  login: false
}

const reducer = (state = initState, action) => {
  const newState = {...state}
  switch (action.type) {
    case 'login':
      newState.login = action.login
      return newState
    default:
      return state
  }
}

const store = createStore(reducer)

export default function Login() {

  const [login, setLogin] = useState(store.getState().login)

  useEffect(() => {
    // 订阅 监听store的变化
    store.subscribe(() => {
      setLogin(store.getState().login)  
    })
  }, [])

  return <>
    {/* store.dispatch 发布一个action改变reducer */}
    <button onClick={ () => store.dispatch({type: 'login', login: !login}) }>{ login ? '退出登录' : '去登录' }</button>
    <p>{ login ? '登录了' : '未登录' }</p>
  </>
}