MERN

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。...

教程：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 的类型是错误的时，应用仍然可以工作，但控制台会展示错误信息。...

教程：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....

教程：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....

教程：FullStackOpen2022/Part 4 软件开发的一个重要环节，就是自动化测试。 本文中以 bloglist 应用为例。对应练习 4.3-4.14。 1. 配置测试环境 通常的做法是为开发和测试定义不同的模式。而 Node 中是用 NODE_ENV 环境变量定义应用的执行模式。 在脚本中指定应用模式的方式不能在 Windows 上工作，这可以通过安装 cross-env 作为一个开发依赖包来修复。另外，如果应用是部署在 Heroku上，cross-env 作为开发依赖项可能在 web 服务器上报错，可以将 cross-env 保存为生产依赖修复这个错误。 npm install --save-dev cross-env npm i cross-env -P 通过在 package.json 中定义 npm 脚本使用跨平台兼容性的 cross-env 库来配置环境： "scripts": { "start": "cross-env NODE_ENV=production node index.js", "dev": "cross-env NODE_ENV=development nodemon index.js", "test": "cross-env NODE_ENV=test jest --verbose --runInBand" }, 对定义应用配置的模块 config.js 进行一些修改： require('dotenv').config() const PORT = process.env.PORT; const MONGODB_URI = process....