FullStackOpen: Redux

FullStackOpen: Redux 当应用变得庞大时,状态管理应当与 React 组件进行解耦。在这一章节,我们会引入 Redux 库,也是目前 React 应用生态中最流行的状态管理解决方案。 教程:FullStackOpen2022/Part 6 本文以 unicafe-redux 与 redux-anecdotes 应用为例。对应练习 6.1-6.18,6.21。 1. Flux 架构 Facebook 开发了 Flux 架构,提供了一种标准的方式来保存应用程序的状态以及如何修改它,使状态管理更加容易。 在 Flux 架构中,状态完全从 React-components 分离到自己的存储中。存储中的状态不会直接更改,而是使用不同的 actions进行更改。当一个操作改变了存储的状态时,视图会被重新渲染。 2. 在 React 中使用 Redux Redux 使用与 Flux 相同的原理,但是更简单一些。 安装 Redux: npm install redux 定义 reducer 处理 state 与 action 在 Redux 中,状态 state 存储在 store 中。存储的状态 state 通过 action 改变,action 对状态 state 的影响通过使用一个 reducer 来定义。 实际上,reducer 是一个函数,它以当前状态 state 和 action 为参数,返回一个新的状态 state。...

2022-05-16 · 6 min

FullStackOpen: React App E2E Test

教程:FullStackOpen2022/Part 5 本文中以 bloglist 应用为例。对应练习 5.11-5.21。 1. 使用 PropTypes 如果希望进一步定义组件 component 的属性值 props,可以通过 prop-types 包来实现。 npm install prop-types 使用 prop-types: components/Togglable.js: import PropTypes from 'prop-types' const Togglable = React.forwardRef((props, ref) => { // .. }) Togglable.propTypes = { buttonLabel: PropTypes.string.isRequired } Togglable.displayName = 'Togglable' export default Togglable components/LoginForm.js: import PropTypes from 'prop-types' const LoginForm = ({ login }) => { // ... } LoginForm.propTypes = { login: PropTypes.func.isRequired, } export default LoginForm 定义属性为 required 但该属性是 undefined 时,或传递给 prop 的类型是错误的时,应用仍然可以工作,但控制台会展示错误信息。...

2022-05-05 · 5 min

FullStackOpen: Bloglist React Front-End

教程:FullStackOpen2022/Part 5 本文中以 bloglist 应用为例。对应练习 5.1-5.10。 1. 实现登录登出功能 登录表单组件解耦 React 官方建议将共享状态提升到最近的共同父组件中去。因此,我们将登录表单的相关 state 移动到相应的组件中,组件只剩一个 props,即 login 函数,登录时,表单将调用该函数。 components/LoginForm.js: import React, { useState } from 'react' const LoginForm = ({ login }) => { const [username, setUsername] = useState('') const [password, setPassword] = useState('') const handleLogin = (e) => { e.preventDefault() login({ username, password, }) setUsername('') setPassword('') } return ( <> <h2>log in to application</h2> <form onSubmit={handleLogin}> <div> username <input type="text" value={username} name="Username" onChange={({ target }) => setUsername(target....

2022-05-02 · 4 min

FullStackOpen: Authentication

教程:FullStackOpen2022/Part 4 为应用增加用户认证和鉴权的功能。User 应当存储在数据库中,并且每一个 Blog 应当关联创建它的 User,只有创建者才拥有删除和编辑它的权利。 本文中以 bloglist 应用为例。对应练习 4.15-4.22。 1. 添加用户 定义 User 并跨 Collection 引用 Blog 定义一个 model 来表示 User,并在 Mongoose validator 的帮助下验证用户。 models/user.js: const mongoose = require("mongoose"); const uniqueValidator = require("mongoose-unique-validator"); const userSchema = new mongoose.Schema({ username: { type: String, minLength: 3, required: true, unique: true, }, name: String, passwordHash: { type: String, minLength: 3, required: true, }, blogs: [ { type: mongoose.Schema.Types.ObjectId, ref: "Blog", }, ], }); userSchema....

2022-04-22 · 6 min

#14 Calendar Picker (React.js) - Advent of JS

1. Overview Challenge & starter files: Advent of JS Full codes: nilstarbb/advent-of-js/14-calendar-picker Live Demo: 14 - Calendar Picker || Advent of JavaScript Preview: 2. Details Users should be able to: view calendar with correct days with the current day highlighted navigate through different months 3. Coding Setup React template Please be aware: this approach is fine for learning and creating simple demos but is not suitable for production....

2022-04-18 · 2 min