首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用createEntityAdapter()方法将数组作为初始数据添加到redux中

如何使用createEntityAdapter()方法将数组作为初始数据添加到redux中
EN

Stack Overflow用户
提问于 2021-11-14 13:07:33
回答 1查看 77关注 0票数 0

我只想添加一个数组作为初始数据,这使我能够显示一些默认数据。

代码语言:javascript
运行
复制
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()只是包含一些数据的数组,我想将它们添加到这个流中

代码语言:javascript
运行
复制
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,
      })
    )
  );
}

..

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-14 13:34:16

如果您确实像上面的代码所建议的那样拥有同步可用的数据,那么只需从头开始添加它。

代码语言:javascript
运行
复制
const initialState = eventAdapter.addMany(
  eventAdapter.getInitialState({
    status: "idle",
    error: null,
  }),
  [
    // your initial items go here
  ]
);

在组件渲染中这样做会导致无限的渲染周期。

如果你没有同步可用的数据,用state: uninitialized或类似的东西初始化你的状态,获取useEffect中的数据并分派它,同时显示一个加载屏幕或其他东西。你不能“暂停”React渲染来等待一些异步的东西,但你总是可以只显示一个加载微调器等。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69963277

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档