V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iGmainC
V2EX  ›  React

关于 react 项目结构的疑惑

  •  
  •   iGmainC · 291 天前 · 2536 次点击
    这是一个创建于 291 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在手头的一个项目需要从零开始

    现在搭的项目结构为:

    src
    ├── api
    │   ├── auth
    │   └── index.ts
    ├── components
    │   ├── A
    │   ├── B
    │   └── C
    ├── pages
    │   ├── APage
    │   ├── BPage
    │   └── CPage
    ├── route.tsx
    ├── store
    │   ├── XXX
    │   └── XXX
    └── utils
    

    技术栈为:vite + tailwindcss + nextui + zustand + axios

    问题 1:这套项目结构和技术栈有什么问题吗

    问题 2:在使用过程中 api 出错式报错的 alert 应该采取什么方案,我现在是错误边界来处理组件本身的异常错误,window.onunhandledrejection 来捕获 api 错误,有没有什么更优雅的 api 报错方案

    8 条回复    2024-01-23 10:35:17 +08:00
    shipLoad
        1
    shipLoad  
       291 天前
    第一个问题 项目结构和技术栈目前来说已经够用了 基本上都是新的技术 没什么问题
    第二个问题 axios 里面有内部的 error 接口 你可以去 axios 文档看看
    XCFOX
        2
    XCFOX  
       291 天前   ❤️ 2
    我建议你放弃思考直接用框架的答案。
    如果当前项目是基于 React-Router 的话上 remix: https://remix.run/
    不然的话直接上 https://nextjs.org/

    啥目录结构、错误处理框架都给你安排得明明白白:
    https://remix.run/docs/en/main/guides/errors
    https://nextjs.org/docs/app/building-your-application/routing/error-handling
    iGmainC
        3
    iGmainC  
    OP
       291 天前
    @shipLoad 请教一下,如果 api 有报错,我是应该包成统一的 ApiError 格式往上 throw ,监听那里接到就按照错误渲染 alert ,还是应该搞一个 store ,报错之后往 store 里塞错误信息
    iGmainC
        4
    iGmainC  
    OP
       291 天前
    @XCFOX 现在用的确实是 React-Router ,主要是对前端的这种技术栈不是特别了解
    vance123
        5
    vance123  
       291 天前
    无所谓的,能跑起来就行,将来慢慢优化
    stimw
        6
    stimw  
       290 天前
    如果是 TypeScript ,那么 router 更推荐 https://tanstack.com/router/v1

    React Router 这个逆天库已经不想评价了。。

    然后新项目的话可以无脑 nextjs ,也不需要关心 router 。

    我不太喜欢 nextui ,shadcn 自主性更强一点。不过这个见仁见智。
    stimw
        7
    stimw  
       290 天前
    api 错误是指 fetch 报错?
    新项目的话纯 axios 也可以扔了,看一下 react-query (一天内足够)。
    ZSeptember
        8
    ZSeptember  
       290 天前
    react-query 内部再使用 axios ,而不是自己 useEffect 套 axios 。
    react-query 有 onError ,axios 也有 interceptors 可以统一处理报错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2698 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:39 · PVG 22:39 · LAX 06:39 · JFK 09:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.