React Redux

2022-05-15

https://cn.redux.js.org/tutorials/essentials/part-1-overview-concepts

Redux 是一个使用叫做 “action” 的事件来管理和更新应用状态的模式和工具库 它以集中式 Store（centralized store）的方式对整个应用中使用的状态进行集中管理，其规则确保状态只能以可预测的方式更新。

  1. Redux 是一个管理全局应用状态的库
    Redux 通常与 React-Redux 库一起使用，把 Redux 和 React 集成在一起
    Redux Toolkit 是编写 Redux 逻辑的推荐方式

  2. Redux 使用 “单向数据流”
    (1)State 描述了应用程序在某个时间点的状态，视图基于该 state 渲染
    (2)当应用程序中发生某些事情时：

    视图 dispatch 一个 action
store 调用 reducer，随后根据发生的事情来更新 state
store 将 state 发生了变化的情况通知 UI

    (3)视图基于新 state 重新渲染

  3. Redux 有这几种类型的代码
    Action 是有 type 字段的纯对象，描述发生了什么
    Reducer 是纯函数，基于先前的 state 和 action 来计算新的 state
    每当 dispatch 一个 action 后，store 就会调用 root reducer

  4. Store
    当前 Redux 应用的 state 存在于一个名为 store 的对象中。
    store 是通过传入一个 reducer 来创建的，并且有一个名为 getState 的方法，它返回当前状态值：

  5. Action
    action 是一个具有 type 字段的普通 JavaScript 对象。你可以将 action 视为描述应用程序中发生了什么的事件.

  6. Reducer
    reducer 是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。

Pre

升级到指定node版本

1
2
sudo n v12.14.0 //hexo提交
sudo n v18.16.0 //Redux 项目

Issue

  1. 升级node版本后,npx create-react-app my-app –template redux-typescript 报错:
    1
    2
    3
    4
    5
    6
    7
    npm ERR! code ERR_SOCKET_TIMEOUT
    npm ERR! network Socket timeout
    npm ERR! network This is a problem related to network connectivity.
    npm ERR! network In most cases you are behind a proxy or have bad network settings.
    npm ERR! network 
    npm ERR! network If you are behind a proxy, please make sure that the
    npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

解决方案：
①进行代理设置为false，如下命令 npm config set proxy false
②npm缓存清理，如下命令 npm cache verify
③再次执行npm install命令即可解决此问题

  1. npm ERR! Error: socket hang up
    解决方案：npm config set registry http://registry.npmjs.org/

  2. 安装Redux DevTools
    https://github.com/zalmoxisus/redux-devtools-extension
    ①https://github.com/zalmoxisus/redux-devtools-extension/releases v2.16.3 下载 extension.zip
    ②解压,把文件夹拖拽到chrome://extensions/

  3. npm install 报错:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    npm ERR! code ERR_SOCKET_TIMEOUT
    npm ERR! network Socket timeout
    npm ERR! network This is a problem related to network connectivity.
    npm ERR! network In most cases you are behind a proxy or have bad network settings.
    npm ERR! network 
    npm ERR! network If you are behind a proxy, please make sure that the
    npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

    npm ERR! A complete log of this run can be found in:

    解决方案：

    1
    2
    npm config get proxy
    npm config rm proxy

UI 库

Arco Design React
智能设计体系，连接轻盈体验，字节跳动出品的企业级设计系统
创作者: 字节跳动
文档地址: https://arco.design/react/docs/dark

React总结

  1. 生命周期:
    挂载时 更新时 卸载时
    componentDidMount
    componentDidUpdate
    componentWillUnmount
    生命周期

ref: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

CATALOG