「17」next-shopping:重构代码

今天重构一下代码,就不做新功能了

首先我们把authSlice改为userSlice,因为是登录和退出,用用户来表示比较好,因为前面一些代码有改动,所以我们还是删除store/slices/authSlice.js,然后新建store/slices/userSlice.js

js 复制代码
'use client'
import { createSlice } from '@reduxjs/toolkit'

const token = window.localStorage.getItem('token') || ''

const initialState = { userInfo, token }

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    userLogout: state => {
      localStorage.removeItem('token')
      state.token = ''
    },
    userLogin: (state, action) => {
      localStorage.setItem('token', action.payload)
      state.token = action.payload
    },
    userInfo: (state, action) => {
      state.userInfo = action.payload
    },
  },
})

export const { userLogout, userLogin, userInfo } = userSlice.actions

export default userSlice.reducer

然后在store/index.js中导出

js 复制代码
import { configureStore } from '@reduxjs/toolkit'

import fetchApi from '@/store/slices/fetchApiSlice'
import userReducer from '@/store/slices/userSlice'
import cartSlice from '@/store/slices/cartSlice'

export const store = configureStore({
  reducer: {
    user: userReducer,
    cart: cartSlice,
    [fetchApi.reducerPath]: fetchApi.reducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(fetchApi.middleware),
})

hooks

实现一个useVerify用来校验token,新建hooks/useVerify.js

js 复制代码
import { useSelector } from 'react-redux'
import jwt from 'jsonwebtoken'

export default function useVerify() {
  const { token } = useSelector(state => state.user)
  let status

  if (!token) return false

  jwt.verify(token, process.env.NEXT_PUBLIC_ACCESS_TOKEN_SECRET, (err, decoded) => {
    if (err) status = false
    if (decoded) status = true
  })

  if (status) return true
  else return false
}

修改components/Layouts/ProfileLayout.tsx

tsx 复制代码
'use client'

import { useRouter } from 'next/navigation'
import { useSelector } from 'react-redux'

import { ClientLayout, ProfileAside } from '@/components'
import useVerify from '@/hooks/useVerify'

export default function ProfileLayout({ children }: any) {
  const isVerify = useVerify()
  const router = useRouter()
  const { user } = useSelector((state: any) => state.user)

  if (!isVerify) {
    router.push('/')
  } else {
    return (
      <>
        <ClientLayout>
          <div className="lg:flex lg:gap-x-4 lg:px-3 lg:container lg:max-w-7xl">
            <div className="hidden lg:block">
              <ProfileAside user={user} />
            </div>
            <div className="py-4 lg:py-8 lg:border lg:border-gray-300 flex-1 lg:rounded-md lg:mt-6 h-fit">
              {children}
            </div>
          </div>
        </ClientLayout>
      </>
    )
  }
}

剩余其他的都是进行了js变成ts

代码地址:github.com/liyunfu1998...

相关推荐
Sun_light15 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
KaiwuDB16 分钟前
使用Docker实现KWDB数据库的快速部署与配置
数据库·docker
爱学习的茄子18 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000018 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心18 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm23 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v27 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠29 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue31 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷35 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js