(true);
+ const isLoading = useAppSelector(selectVideoLoadingState),
+ dispatch = useAppDispatch(),
+ handerChangeLoading = (state: boolean) =>
+ dispatch(changeLoading({ stateName: "videoIsLoading", Tostate: state }));
useEffect(() => {
// 在内部定义fetchHandler,保证拿到的是同步的
const fetchHandler = async (page: number = 1) => {
@@ -38,8 +46,8 @@ export default function VideoMasonry(props: VideoRouterMasonryType) {
]);
};
setLists([]);
- setLoading(true);
- fetchHandler(1).then(() => setLoading(false));
+ handerChangeLoading(true);
+ fetchHandler(1).then(() => handerChangeLoading(false));
}, [props]);
return (
diff --git a/src/routers/video/tools.ts b/src/routers/video/tools.ts
index c97a786..12c1f43 100644
--- a/src/routers/video/tools.ts
+++ b/src/routers/video/tools.ts
@@ -8,7 +8,7 @@ export const fetchVideohnadler = async (
props: VideoRouterMasonryType
) => {
const res = await fetchVideos({
- order: "view",
+ order: "score",
...props,
page,
});
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ab70f6..f5714e7 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,12 @@
import { configureStore } from "@reduxjs/toolkit";
import device from "./device";
import ActiveTags from "./tags";
+import loading from "./loading";
const store = configureStore({
reducer: {
device,
ActiveTags,
+ loading,
},
});
export default store;
diff --git a/src/store/loading/index.ts b/src/store/loading/index.ts
new file mode 100644
index 0000000..b220a74
--- /dev/null
+++ b/src/store/loading/index.ts
@@ -0,0 +1,41 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import type { RootState } from "..";
+
+interface LoadingState {
+ /**
+ * @description 视频接口是否正在获取
+ */
+ videoIsLoading: boolean;
+}
+interface IchangeLoadingItem {
+ stateName: keyof LoadingState;
+ Tostate?: boolean;
+}
+
+const initialState: LoadingState = {
+ videoIsLoading: true,
+};
+export const LoadingSlice = createSlice({
+ name: "loading",
+ initialState,
+ reducers: {
+ /**
+ *
+ */
+ changeLoading: (state, action: PayloadAction) => {
+ const { stateName, Tostate } = action.payload;
+ if (typeof action.payload.Tostate === "boolean") {
+ state[stateName] = Tostate as boolean;
+ } else {
+ state[stateName] = !state[stateName];
+ }
+ },
+ },
+});
+
+export const { changeLoading } = LoadingSlice.actions;
+export const selectVideoLoadingState = (state: RootState) =>
+ state.loading.videoIsLoading;
+
+export default LoadingSlice.reducer;
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 02625a6..2949e74 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -10,7 +10,7 @@ export function fetchVideos(
params: IFetchVideoParams
): Promise {
const fetchUrl = `/v1/video-interface/advanced-search?order=${
- params.order || "view"
+ params.order || "score"
}&page=${params.page}${
params.copyright ? `©right=${params.copyright}` : ""
}