Redux Toolkit中的不变性是什么,如何实现?

q43xntqr  于 2023-01-26  发布在  其他
关注(0)|答案(1)|浏览(144)

我知道Redux Toolkit中的Immer库会把所有可变代码转换成createSlice()中的不变代码,但是我还是想写不变的reducer。这个代码是不变的吗?如果不是,如何修正它?Redux Toolkit中的不变性是什么?如何实现?

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { Tab } from '../../logic/types'
import { TabsState, updateTabPayload } from '../types'

const initialState: TabsState = {
  tabs: []
}

export const tabsSlice = createSlice({
  name: 'tabs',
  initialState,
  reducers: {
    loadTabs: (state, tabs: PayloadAction<Tab[]>) => {
      state.tabs = [...state.tabs, ...tabs.payload]
    },
    createTab: (state, tab: PayloadAction<Tab>) => {
      state.tabs = [...state.tabs, tab.payload]
    },
    updateTab: (state, data: PayloadAction<updateTabPayload>) => {
      const index = state.tabs.findIndex((tab) => tab.id === data.payload.id)
      state.tabs[index] = { ...state.tabs[index], ...data.payload.update }
    },
    deleteTab: (state, id: PayloadAction<number>) => {
      state.tabs = state.tabs.filter((tab) => tab.id !== id.payload)
    }
  }
})

export const { loadTabs, createTab, updateTab, deleteTab } = tabsSlice.actions

export default tabsSlice.reducer

我试着去寻找这方面的信息,但还是没有找到。

svujldwt

svujldwt1#

一旦你写了一个=,它就不是不可变的了。
例如,不可变的更新将如下所示

loadTabs: (state, tabs: PayloadAction<Tab[]>) => {
  return {
    ...state,
    tabs: [...state.tabs, ...tabs.payload],
  };
}

也就是说:如果你不需要的话,为了不变性而不变性绝对是愚蠢的差事。
除非你有一个很好的理由需要它,否则你应该选择编写可读的代码--这是一个很难读的代码,同时也不会带来真实的的好处。
你可能会说它更有性能,但这种性能提升是绝对可以忽略的,它是“我可以每秒执行1000万次还是1200万次?"
请帮你自己一个忙,编写可变的createSlice大小写还原器。More docs here

相关问题