我只想添加一个数组作为初始数据,这使我能够显示一些默认数据。
eventSlice.ts
import {
createEntityAdapter,
createSlice,
EntityAdapter,
} from "@reduxjs/toolkit";
import { RootState } from "../store";
export type EventType = {
id: string;
title: string;
description: string;
location: string;
date: string;
image: string;
isFeatured: boolean;
};
const eventAdapter: EntityAdapter<EventType> = createEntityAdapter<EventType>({
// sortComparer: (a: any, b: any) => b.date.localCompare(a.date),
});
const initialState = eventAdapter.getInitialState({
status: "idle",
error: null,
});
export const eventSlice = createSlice({
name: "event",
initialState,
reducers: {
eventLoading(state, action) {
if (state.status === "idle") {
state.status = "pending";
}
},
eventCleaded: eventAdapter.removeAll,
eventAdded: eventAdapter.addOne,
eventUpdated: eventAdapter.updateOne,
},
});
export const eventSelector = eventAdapter.getSelectors<RootState>(
(state) => state.events
);
export const { eventAdded, eventCleaded, eventLoading, eventUpdated } =
eventSlice.actions;
export default eventSlice.reducer;
在通过其他方法访问sliceEvent.ts之前,我想添加一些数据:另外,getAllEvents()只是包含一些数据的数组,我想将它们添加到这个流中
import { getAllEvents } from "../../../dummy-data";
import { useAppDispatch } from "../hooks";
import { eventAdded, EventType } from "./eventSlice";
export function CreateEvents() {
const dispatch = useAppDispatch();
const events: EventType[] = getAllEvents();
const createEvents = events.map((event) =>
dispatch(
eventAdded({
id: event.id,
date: event.date,
description: event.description,
image: event.image,
isFeatured: event.isFeatured,
location: event.location,
title: event.title,
})
)
);
}
..
发布于 2021-11-14 13:34:16
如果您确实像上面的代码所建议的那样拥有同步可用的数据,那么只需从头开始添加它。
const initialState = eventAdapter.addMany(
eventAdapter.getInitialState({
status: "idle",
error: null,
}),
[
// your initial items go here
]
);
在组件渲染中这样做会导致无限的渲染周期。
如果你没有同步可用的数据,用state: uninitialized
或类似的东西初始化你的状态,获取useEffect
中的数据并分派它,同时显示一个加载屏幕或其他东西。你不能“暂停”React渲染来等待一些异步的东西,但你总是可以只显示一个加载微调器等。
https://stackoverflow.com/questions/69963277
复制相似问题