使用 Redux 维护 UserInfo 信息

import { createStore } from 'redux'

const initialState = {
  account: null
}

function accountReducer(state = initialState, action) {
  switch (action.type) {
    case 'account/login':
      if (action.payload.password === '123456') {
        return {
          ...state,
          account: {
            username: 'zhangsan',
            role: 'admin'
          }
        }
      } else {
        return {
          ...state,
          account: null
        }
      }
    case 'account/logout':
      return {
        ...state,
        account: null
      }
    default:
      return state
  }
}

export default createStore(
  accountReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

import { useState } from "react";
import { connect } from 'react-redux'

function App({ onLogin, onLogout, hasLoggedIn }) {
  const [password, setPassword] = useState('')

  function handleLogin() {
    onLogin(password)
  }

  function handleLogout() {
    onLogout()
  }

  return (
    <div>
      <input value={password} onChange={(e) => setPassword(e.target.value)} />
      { !hasLoggedIn && <button onClick={handleLogin}>登录</button> }
      { hasLoggedIn && <button onClick={handleLogout}>注销</button> }
    </div>
  );
}

function mapStateToProps(state) {
  return {
    hasLoggedIn: state.account !== null
  }
}

const mapDispatchToProps = {
  onLogin: (password) => {
    return {
      type: 'account/login',
      payload: {
        password
      }
    }
  },
  onLogout: () => {
    return {
      type: 'account/logout'
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);