React：简单的身份验证流程
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
既然我们已经了解了如何使用useState`<T>`useReducer和 `<Context>`，那么我们如何将这些概念应用到我们的项目中呢？一个简单的例子是创建一个简单的身份验证流程。
我们首先UserContext使用 React Context 进行设置。
import { createContext } from 'react'
const UserContext = createContext({
user: null,
hasLoginError: false,
login: () => null,
logout: () => null
})
export default UserContext
现在我们已经创建了一个上下文，就可以在我们的包装组件中使用它了。我们还会用它useReducer来维护上下文的状态。
import UserContext from './UserContext'
const INITIAL_STATE = {
user: null,
hasLoginError: false
}
const reducer = (state, action) => { ... }
const App = () => {
const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
return (
<UserContext.Provider>
...
</UserContext.Provider>
)
}
我们的 reducer 将处理 2 种动作类型——login和logout。
const reducer = (state, action) => {
switch(action.type) {
case 'login': {
const { username, password } = action.payload
if (validateCredentials(username, password)) {
return {
...state,
hasLoginError: false,
user: {} // assign user here
}
}
return {
...state,
hasLoginError: true,
user: null
}
}
case 'logout':
return {
...state,
user: null
}
default:
throw new Error(`Invalid action type: ${action.type}`)
}
}
实现 reducer 之后，我们就可以使用它dispatch来调用这些 action。我们将创建一些函数，并将它们传递给 provider 的值。
...
const login = (username, password) => {
dispatch({ type: 'login', payload: { username, password } })
}
const logout = () => {
dispatch({ type: 'logout' })
}
const value = {
user: state.user,
hasLoginError: state.hasLoginError,
login,
logout
}
return (
<UserContext.Provider value={value}>
...
</UserContext.Provider>
)
现在，当我们的状态更新时，我们的值也会更新，并且我们已经传递了登录和注销函数；我们将能够在后续的子组件中访问这些值。
我们将创建两个组件——LoginForm和UserProfile。当没有用户时，我们将渲染表单；当用户登录时，我们将渲染个人资料。
...
<UserContext.Provider value={value}>
{user && <UserProfile />}
{!user && <LoginForm />}
</UserContext.Provider>
...
我们先从登录表单开始，我们将使用它useState来管理表单的状态。我们还会获取上下文，以便我们可以访问login和hasLoginError。
const { login, hasLoginError } = useContext(UserContext)
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const onUsernameChange = evt => setUsername(evt.target.value)
const onPasswordChange = evt => setPassword(evt.target.value)
const onSubmit = (evt) => {
evt.preventDefault()
login(username, password)
}
return (
<form onSubmit={onSubmit}>
...
{hasLoginError && <p>Error Logging In</p>}
<input type='text' onChange={onUsernameChange} />
<input type='password' onChange={onPasswordChange} />
...
</form>
)
如果我们已经登录，我们需要访问用户对象和注销功能。
const { logout, user } = useContext(UserContext)
return (
<>
<h1>Welcome {user.username}</h1>
<button onClick={logout}>Logout</button>
</>
)
现在，我们已经用 React 实现了一个简单的身份验证流程，并可以使用不同的方式来管理我们的状态！
文章来源：https://dev.to/koralarts/react-simple-auth-flow-3fbf