带有可选类型有效载荷的Dispatch Redux-Tool套件功能?

发布于 2025-02-11 03:42:55 字数 1139 浏览 0 评论 0原文

我拥有以下逻辑,一块更大的状态,我想创建的rducer将rducer设置为倾倒一大堆适合主要类型但缺少某些主要类型的数据...我的当前问题是,该类型是严格的如果我想更改当前模式和当前用户,则以换句话说,但我不想更改性别,ts snaps(在派遣中)告诉我我无法分配,因为性别缺少如何使参数的参数换档器更灵活,无需使用任何!

// Dispach
dispatch(
  setGlobalState({
    currentUser: 'user',
    currentMode: 'a1' || '',
    // no gender ! i just dont want to update gender ! 
    // and i dont want to make a separete call for each ! 
    // Since the orginal logic has like 10 itmes 
  })
);

// Reducer

type userType = {
  user: '';uid: ''
} | {
  user: 'user';uid: string
}

export interface globalState {
  currentUser: userType;
  currentMode: 'a1' | 'a2' | 'a3';
  gender: '' | 'male' | 'female';
}

const initialState: globalState = {
  currentUser: {
    user: '',
    uid: ''
  },
  currentMode: 'a3',
  gender: '',

};

export const globalSlice = createSlice({
      name: 'global',
      initialState,
      reducers: {
        setGlobalState: (state, action: PayloadAction < globalState > ) => {
          Object.assign(state, { ...action.payload
          });
        }
      }

I have the following logic a chunk of a bigger state, I want to created set my rducer to dump a load of data that are fitting to main type yet missing some of the main type... my current issue is that the type is strict to that main type in other words if I want to change current Mode and current user , but I don't want to change gender, ts snaps (in dispatch) telling me I cannot assign since gender is missing how to make the argument of the reducer more flexible without using any !

// Dispach
dispatch(
  setGlobalState({
    currentUser: 'user',
    currentMode: 'a1' || '',
    // no gender ! i just dont want to update gender ! 
    // and i dont want to make a separete call for each ! 
    // Since the orginal logic has like 10 itmes 
  })
);

// Reducer

type userType = {
  user: '';uid: ''
} | {
  user: 'user';uid: string
}

export interface globalState {
  currentUser: userType;
  currentMode: 'a1' | 'a2' | 'a3';
  gender: '' | 'male' | 'female';
}

const initialState: globalState = {
  currentUser: {
    user: '',
    uid: ''
  },
  currentMode: 'a3',
  gender: '',

};

export const globalSlice = createSlice({
      name: 'global',
      initialState,
      reducers: {
        setGlobalState: (state, action: PayloadAction < globalState > ) => {
          Object.assign(state, { ...action.payload
          });
        }
      }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

妞丶爷亲个 2025-02-18 03:42:56

您需要做pareloadaction&lt; partial&lt; globalstate&gt;

但总的来说,请注意,这不是建议使用Redux的“干净”方式。您不应在组件中对新状态进行封闭,而应在还原器中进行插曲 - 描述了UI中发生的事件的动作 - 留下决定应更改以及如何将其更改为还原器。

请给出 redux样式指南读取,尤其是零件,尤其是“尽可能多的逻辑”在还原器中,“还原器应拥有状态形状”,“模型动作作为事件,而不是setters”和“写有意义的动作名称”。

You need to do PayloadAction<Partial<globalState>>.

But generally, please be advised that this is not a recommended "clean" way of using Redux. You should not do caclulation of new state in your component, but do so in the reducer - with the action describing the event that occured in your UI - leaving the decision what should change and how it should change to the reducer.

Please give the Redux Style Guide a read, especially the parts "Put as Much Logic as Possible in Reducers", "Reducers Should Own the State Shape", "Model Actions as Events, Not Setters" and "Write Meaningful Action Names".

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文