react笔记（二十）—— 配置路径别名

小徐今天学习了吗
191 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（十九）—— 嵌套路由的配置中，我们学习了嵌套路由的配置、编程式导航、动态路由与路由参数获取、路由重定向等相关知识点。在本篇文章中，我们将学习到项目中经常用到的知识点，包括配置路径别名、@别名路径提示、通过redux实现登录功能等相关知识点。

配置路径别名

在react项目中，我们会使用@来表示src目录的绝对路径，以此来简化路径。例如，

import {getToken} from '@/utils/storage'

需要注意的是，CRA 将所有工程化配置，都隐藏在了 react-scripts 包中，所以，项目中看不到任何配置信息。如果要修改 CRA 的默认配置，有以下几种方案：

  1. 【推荐】通过第三方库来修改，比如，@craco/craco
  2. 通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中（注意：该操作不可逆！！！）

使用@craco/craco配置路径别名步骤：

  1. 安装修改 CRA 配置的包：yarn add -D @craco/craco
  2. 在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名
  3. 修改 package.json 中的脚本命令
  4. 在代码中，就可以通过 @ 来表示 src 目录的绝对路径
  5. 重启项目，让配置生效

在根目录中新建craco.config.js文件。

const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

修改package.json中的脚本命令。

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

@别名路径提示

配置完路径别名后，我们要让vscode识别@路径并给出路径提示。在 VSCode 中，jsconfig.json 文件中的有时候会有红色波浪线提示错误，直接忽略即可，不会影响路径提示。

配置@别名路径提示步骤：

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

在根目录中新建jsconfig.json。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

配置完之后，VSCode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @ 就是 src 目录。

通过redux实现登录功能

登录时，会将 token 保存到本地缓存中，为了方便后续操作，可以在 Redux 状态中也保存一份。但如果不处理，刷新页面时，Redux 中存储的 token 就没有了。所以，为了能够在刷新页面时，也能让 Redux 拿到 token 值，就需要在每次刷新时将 token 存储到 Redux 中。可以在 createStore 函数中实现。

createStore 的 initialState（初始值）比子 reducer 中的默认值优先级高，所以，提供了 initialState 后，就以此处的 initialState 为准。

createStore() 函数共有三个参数：第一个参数：根 reducer；第二个参数：Redux 初始状态；第三个参数：中间件。

在store/index.js文件中

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import reducer from './reducers'
import {composeWithDevTools} from 'redux-devtools-extension'
import { getToken } from "@/utils/storage";

const store = createStore(reducer, {
    login: {
      token: getToken()
    }
}, composeWithDevTools(applyMiddleware(thunk)))

export default store
avatar
文章
阅读
粉丝