React + TypeScript + ReduxJS/Toolkit 手敲历史标签页

2023-10-29 13:43:46

利用 Redux 在 React 中轻松实现历史标签页功能

在应用程序中实施历史标签页的好处

历史标签页是一个方便的功能，可帮助用户轻松快速地导航到以前访问过的页面。通过存储用户在主页中访问过的路由，历史标签页可以提升用户体验，使其在需要时快速恢复之前的浏览活动。

了解 ReduxJS/Toolkit

ReduxJS/Toolkit 是 Redux 的一个工具包，它简化了 Redux 的使用，提供了一系列内置工具，如 createSlice、createAction 和 createReducer，让创建 Redux store、action 和 reducer 变得轻而易举。

创建 Redux Store

Redux store 是一个全局状态存储库，它保存着应用程序的所有状态。使用 ReduxJS/Toolkit，您可以轻松地创建一个 store：

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {},
});

export default store;

创建 Redux Action

Redux action 是应用程序中发生操作的对象。每个 action 必须有一个 type 属性，指定操作的类型，还可以有一个 payload 属性，包含与操作相关的数据：

const addHistoryTabAction = createAction<string>('ADD_HISTORY_TAB');

创建 Redux Reducer

Redux reducer 是一个处理 Redux action 并更新 Redux store 中状态的函数。它必须是一个纯函数，只根据 Redux action 和 Redux store 中的当前状态计算新的状态：

const historyTabReducer = createReducer([], {
  [addHistoryTabAction.type]: (state, action) => {
    return [...state, action.payload];
  },
});

在 React 中使用 Redux 存储历史标签页

在 React 中使用 Redux 存储历史标签页，请按照以下步骤进行：

在 React 组件中导入 Redux store 和 Redux action。
在 React 组件中订阅 Redux store 中的历史标签页状态。
当用户点击某个菜单项或历史标签项时，分发 Redux action 将对应的路由添加到历史标签页状态中。

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addHistoryTabAction } from './redux/actions';

const HistoryTab = () => {
  const dispatch = useDispatch();
  const historyTabs = useSelector((state) => state.historyTabs);

  useEffect(() => {
    dispatch(addHistoryTabAction('/home'));
  }, []);

  return (
    <ul>
      {historyTabs.map((tab) => (
        <li key={tab}>{tab}</li>
      ))}
    </ul>
  );
};

export default HistoryTab;