dispatch(changeNavMoreShowed())}
style={{
display: inView ? "none" : "flex",
}}
@@ -143,25 +150,22 @@ const NavItem: FC = memo((props) => {
});
const NavTagChipItem: FC = memo((props) => {
- const [clicked, setClick] = useState(false),
- { handerAddTag, handerDeleteTag } = useTagsSelected();
+ const clicked = useAppSelector(selectActiveTags).some(
+ (item) => item.id === props.id
+ ),
+ dispatch = useAppDispatch();
return (
- setClick((clicked) => {
- //注意这里是要改变点击状态，所以应该反着来
- //说明之前是点击状态，现在要取消点击
- if (clicked) {
- handerDeleteTag(props);
- } else {
- handerAddTag(props);
- }
- return !clicked;
- })
- }
+ onClick={() => {
+ if (clicked) {
+ dispatch(handerDeleteTag(props));
+ } else {
+ dispatch(handerAddTag(props));
+ }
+ }}
/>
);
});
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
index 5c9e7bf..cf93003 100644
--- a/src/routers/video/index.tsx
+++ b/src/routers/video/index.tsx
@@ -1,16 +1,9 @@
import VideoMasonry from "./masonry";
-import { useTagsSelected } from "@components/proview/tagSelect";
+
export default function VideoPage() {
- const { tags } = useTagsSelected(),
- qlists = tags
- .filter((item) => item.queryType === "q")
- .reduceRight((pre, cur) => {
- return `${cur.queryString}+${pre}`;
- }, ""),
- q = qlists.length < 1 ? undefined : `tag.${qlists}`;
return (
<>
-
+
);
}
diff --git a/src/store/device/index.ts b/src/store/device/index.ts
new file mode 100644
index 0000000..8a2f145
--- /dev/null
+++ b/src/store/device/index.ts
@@ -0,0 +1,34 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+import type { RootState } from "..";
+
+interface DeviceState {
+ /**
+ * @description nav栏是否展开
+ */
+ navMoreShowed: boolean;
+}
+const initialState: DeviceState = {
+ navMoreShowed: false,
+};
+export const DeviceSlice = createSlice({
+ name: "device",
+ initialState,
+ reducers: {
+ /**
+ * @description 修改nav列表展开情况
+ */
+ changeNavMoreShowed: (state) => {
+ state.navMoreShowed = !state.navMoreShowed;
+ },
+ },
+});
+
+export const { changeNavMoreShowed } = DeviceSlice.actions;
+/**
+ * @description 获取nav是否展开
+ */
+export const selectNavMoreShowed = (state: RootState) =>
+ state.device.navMoreShowed;
+
+export default DeviceSlice.reducer;
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
new file mode 100644
index 0000000..fb559c3
--- /dev/null
+++ b/src/store/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./index";
+
+// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..7ab70f6
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+import device from "./device";
+import ActiveTags from "./tags";
+const store = configureStore({
+ reducer: {
+ device,
+ ActiveTags,
+ },
+});
+export default store;
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/store/tags/index.ts b/src/store/tags/index.ts
new file mode 100644
index 0000000..567581f
--- /dev/null
+++ b/src/store/tags/index.ts
@@ -0,0 +1,51 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { NavQueryItemType } from "@routers/layout/nav/tools";
+
+import type { RootState } from "..";
+
+interface TagStates {
+ /**
+ * @description 用户点击的tag栏
+ */
+ activeTags: NavQueryItemType[];
+}
+const initialState: TagStates = {
+ activeTags: [],
+};
+export const ActiveTagsSlice = createSlice({
+ name: "activeTags",
+ initialState,
+ reducers: {
+ /**
+ * @description 添加tag
+ */
+ handerAddTag: (state, action: PayloadAction) => {
+ //这里需要注意的是queryType有三种，只有q可以同存.
+ switch (action.payload.queryType) {
+ case "q":
+ break;
+
+ default:
+ state.activeTags = state.activeTags.filter(
+ (item) => item.queryType !== action.payload.queryType
+ );
+ break;
+ }
+ state.activeTags = [...state.activeTags, action.payload];
+ },
+ /**
+ * @description 删除tag
+ */
+ handerDeleteTag: (state, action: PayloadAction) => {
+ state.activeTags = state.activeTags.filter(
+ (item) => item.id !== action.payload.id
+ );
+ },
+ },
+});
+
+export const { handerAddTag, handerDeleteTag } = ActiveTagsSlice.actions;
+
+export const selectActiveTags = (state: RootState) =>
+ state.ActiveTags.activeTags;
+export default ActiveTagsSlice.reducer;