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

相关推荐
群联云防护小杜6 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
程序猿小D1 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
良辰未晚1 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas