（我不熟悉 Zustand 和 Immer，但也許我可以幫忙...）

總是有不同的方法，我在這裡建議我最喜歡的一種。

明確區分「調度」動作和狀態的實際「突變」。 （也許在兩者之間添加另一個層級）。

特定的「突變」功能

我建議創建特定「突變」函數，而不是通用函數，即：

• 而非 updateThisTt：() => { ...,
• 使用諸如 addStop: () => { ... 之類的函數。

根據需要建立許多突變函數，每個函數都有一個目的。

在「變異」函數中建立新狀態

從概念上講，僅在突變函數內使用 immer 生成器。
（我的意思是關於商店。當然，您仍然可以將immer#用於其他目的）。

根據這個官方範例：

import { produce } from 'immer'

const useLushStore = create((set) => ({
  lush: { forest: { contains: { a: 'bear' } } },
  clearForest: () =>
    set(
      produce((state) => {  // <----- create the new state here
        state.lush.forest.contains = null
      })
    ),
}));

const clearForest = useLushStore((state) => state.clearForest);
clearForest();

在元件內部，您現在可以呼叫“mutator”函數。

const onAddStop = (name) => {
  updateThisTt( timetable, name );
}

建設新國家

如果建置新狀態變得複雜，您仍然可以提取一些「建構器」函數。 但首先考慮下一節「大檔案和重複」。

例如您的 addStop 函數也可以在 Zustand 突變內部呼叫：

updateThisTt: ( timetable: Timetable, stopName: string ) => {
    const newTimeTable = addStop( timetable, stopName );
    set( ( s ) => {
        if( s.selectedTtIdx === null ){
            throw new Error( "no selected timetable" )
        }
        s.timetables[ s.selectedTtIdx ] = newTimeTable;
    });
}

大檔案和重複

當然應該避免程式碼重複，但總是需要權衡。

我不會建議具體的方法，但請注意，程式碼通常閱讀多於寫。 有時我認為值得多寫幾封信，例如類似 state.timetables[index] 多次， 如果它使程式碼的目的更加明顯。你需要自己判斷。

無論如何，我建議將您的突變函數放入一個不執行任何其他操作的單獨檔案中， 這樣，它看起來可能比您想像的更容易理解。

如果您有一個很大的文件，但完全只專注於修改狀態， 並且結構一致，即使您必須滾動，也很容易閱讀 幾頁。

例如如果它看起來像這樣：

// ...

//-- Add a "stop" to the time table 
addStop: ( timetable: Timetable, stopName: string ) => {

   // .. half a page of code ...
   
},

//-- Do some other specific state change
doSomethingElse: ( arg1 ) => {

   // .. probably one full page of code ...
   
},

//-- Do something else again ... 
doSomethingAgain: () => {

   // .. another half page of code ...
   
},

// ...

另請注意，這些變元函數是完全獨立的（或者它們是嗎？我希望 Zustand 在這裡使用純函數，不是嗎？）。

這意味著，如果它變得複雜，你甚至可以拆分多個突變函數 分成資料夾內的多個單獨文件 就像/store/mutators/timeTable.js。

但您以後隨時都可以輕鬆做到這一點。

建構「有效負載」（「操作呼叫者」）

您可能會覺得需要另一個“等級” 事件處理程序和變異函數之間。 我通常有這樣一個層，但我沒有一個好的名字。 我們暫時稱之為「操作呼叫者」。

有時很難決定什麼屬於“變異函數”，什麼又屬於“變異函數” 「動作調用者」。

無論如何，您可以在“操作呼叫者”內部“建立一些資料”，但您應該 此處不進行任何類型的狀態操作，即使使用immer#也不行。

轉換狀態與建立有效負載

這是一個微妙的區別，您可能不應該對此過於擔心（並且可能有例外），但作為一個例子：

您可以在「動作呼叫者」內使用舊狀態的某些部分，例如：

// OK:
const { language } = oldState;
const newItem = {  // <-- This is ok: build a new item, use some data for that.
    id: 2,
    language: language,
};
addNewItemMutator( newItem ):

但是您不應該不將舊狀態對映（或轉換）到新狀態，例如：

// NOT OK:
const { item } = oldState;
const newItem = {  // <-- This kind of update belongs inside the mutator function.   
    ...item,  
    updatedValue: 'new',
};
addNewItemMutator( newItem ):

另一個例子

這裡不提出具體建議，只是舉個例子：

將許多值傳遞給變異器可能會變得混亂，例如：

const myComponent = ( props ) =>{
    const { name } = props;
    cosnt value = useValue();
    
    // ...
    
    const onAddNewItem: () => {
        const uniqueId = createUUID();
        addNewItemMutator( name, value, uniqueId, Date.now() );
    },

在事件處理程序中，您希望專注於您真正想做的事情，例如“新增項目”， 但不要考慮所有的論點。此外，您可能還需要該新物品來做其他事情。

或你可以寫：

const callAddItemAction = function( name, value ){

    const newItem = {
        name:        name,
        value:       value,
        uniqueId:    createUUID(),
        dateCreated: Date.now(),
    };
    
    // sendSomeRequest( url, newItem ); // maybe some side effects
    
    addNewItemMutator( newItem );
}

const myComponent = ( props ) =>{
    const { name } = props;
    cosnt value = useValue();
    
    // ...
    
    const onAddNewItem: () => {
        callAddItemAction( name, value );
    },