typescript - 在 Redux 中更新状态时，是什么导致了“延迟”？

我在努力理解我在下面的 Redux 和 React Native 代码中做错了什么。

我正在尝试创建一个锻炼跟踪应用，用户可以输入他们的锻炼进度。我已经创建了一个 'workoutSessionSlice' 来跟踪状态。

const initialState: IWorkoutSessionState = {
  currentTrackingEquipment: {
    createdOn: { seconds: 0, nanoseconds: 0 },
    equipmentName: '',
    repetitions: [],
    results: [],
    repetitionIndex: 0,
  },
  hasRunningSession: false,
  isTrackingEquipment: false,
  savedSessionEquipmentRecords: [],
};

export const workoutSessionSlice = createSlice({
  name: 'workoutSession',
  initialState,
  reducers: {
    saveEquipmentRecord: (
      state: any,
      action: PayloadAction<IEquipmentRecord>,
    ) => {
      state.savedSessionEquipmentRecords.push(action.payload);
    },
    addResult: (state: any, action: PayloadAction<IRepResult>) => {
      state.currentTrackingEquipment.results[
        state.currentTrackingEquipment.repetitionIndex
      ] = action.payload;
    },
    updateRepIndex: (state: any, action: PayloadAction<number>) => {
      state.currentTrackingEquipment.repetitionIndex = action.payload;
    },
  },
});

用户使用某个设备，并通过按钮将每次重复的结果添加到状态中。我注意到，当我在这个按钮的函数中使用 console.log 打印负载和状态时，状态存在“延迟”：

const handleAddRep = (success: boolean, nextRepIndex: boolean) => {

    console.log({
      repetitions:
        workOutSession.currentTrackingEquipment.results[
          workOutSession.currentTrackingEquipment.repetitionIndex
        ].repetitions,
      weight: equipmentTracking.wheelPickerValue,
      success,
    });

    dispatch(
      addResult({
        repetitions:
          workOutSession.currentTrackingEquipment.results[
            workOutSession.currentTrackingEquipment.repetitionIndex
          ].repetitions,
        weight: equipmentTracking.wheelPickerValue,
        success,
      }),
    );

    console.log(workOutSession);
  };

控制台：

Object {
  "repetitions": 15,
  "success": true,
  "weight": 100,
}

Object {
  "currentTrackingEquipment": Object {
    "createdOn": Object {
      "nanoseconds": 735000000,
      "seconds": 1671364848,
    },
    "equipmentName": "Bench-press-incline",
    "repetitionIndex": 0,
    "repetitions": Array [
      15,
      12,
      7,
    ],
    "results": Array [
      Object {                  // expected this object to be replaced
        "repetitions": 15,
        "success": false,
        "weight": 0,
      },
      Object {
        "repetitions": 12,
        "success": false,
        "weight": 0,
      },
      Object {
        "repetitions": 7,
        "success": false,
        "weight": 0,
      },
    ],
  },
  "hasRunningSession": true,
  "isTrackingEquipment": true,
  "savedSessionEquipmentRecords": Array [],
}

当我在按钮函数外手动记录状态时，我确实看到了数组和对象中的正确数据：

Object {
  "currentTrackingEquipment": Object {
    "createdOn": Object {
      "nanoseconds": 735000000,
      "seconds": 1671364848,
    },
    "equipmentName": "Bench-press-incline",
    "repetitionIndex": 1,
    "repetitions": Array [
      15,
      12,
      7,
    ],
    "results": Array [
      Object {
        "repetitions": 15,
        "success": true,
        "weight": 100,
      },
      Object {
        "repetitions": 12,
        "success": false,
        "weight": 0,
      },
      Object {
        "repetitions": 7,
        "success": false,
        "weight": 0,
      },
    ],
  },
  "hasRunningSession": true,
  "isTrackingEquipment": true,
  "savedSessionEquipmentRecords": Array [],
}

问题是，当我想保存记录时，这种“延迟”也会发生，导致结果数组中的最后一个对象没有被更新。

onPress={() => {
  Alert.alert('Successfully finished rep?', undefined, [
    {
      text: 'Yes',
      onPress: () => {
        if (
          workOutSession.currentTrackingEquipment
            .repetitionIndex ===
          workOutSession.currentTrackingEquipment.results.length - 1
        ) {
          handleAddRep(true, false);  // Should update rep in "currentTrackingEquipment"
          Alert.alert('Finished tracking equipment?', undefined, [
            {
              text: 'Yes',
              onPress: () => {
                handleFinishEquipmentTracking(); // adds current tracking equipment to "savedSessionEquipmentRecords"
              },
            },
            {
              text: 'No, go back',
            },
          ]);
        } else {
          handleAddRep(true, true);
        }
      },
    },
  ]);
}}

我尝试过在对象的键上设置值，而不是替换整个对象，但那也不行。任何帮助都将不胜感激！

解决了！感谢 Phry。

下面是我为使其工作所作的更改：在上面的代码中，我调用了名为“handleFinishEequipmentTracking”的函数，它看起来是这样的：

const handleFinishEquipmentTracking = () => {
  dispatch(
    saveEquipmentRecord({
      createdOn: workOutSession.currentTrackingEquipment.createdOn,
      equipmentName: workOutSession.currentTrackingEquipment.equipmentName,
      repetitions: workOutSession.currentTrackingEquipment.repetitions,
      results: workOutSession.currentTrackingEquipment.results,
      repetitionIndex:
        workOutSession.currentTrackingEquipment.repetitionIndex,
    }),
  );
};

正如 Phry 所解释的，作为参数传递给“saveEquipmentRecord”的对象是一个局部变量，当状态被“handleAddRep”更改时，它不会更新。我不得不在“saveEquipmentRecord”函数中做两个简单的修改：

const handleFinishEquipmentTracking = () => {
  dispatch(saveEquipmentRecord());
};

在 reducer 中，我更改了已保存的 equipmentRecords 的数据来源为状态本身，而不是本地变量中的状态副本：

来自：

saveEquipmentRecord: (
  state: any,
  action: PayloadAction<IEquipmentRecord>,
) => {
  state.savedSessionEquipmentRecords.push(action.payload);
},

到 :

saveEquipmentRecord: (state: any) => {
  state.savedSessionEquipmentRecords.push(state.currentTrackinEquipment);
},

答案＃1

没有“延迟”——你看到的是旧的（“过时的”）数据，这些数据永远不会更新。

看这个例子：

let state = { foo: 1 }
const s = state
state = { foo: 2 }
// s is now { foo: 1 } and state is { foo: 2 }

仅仅因为你的状态更新为一个新值（它将是一个完全新的对象，因为状态更新是不可变的）并不意味着你的本地变量会更新——它们仍然指向之前的相同值。

在将来，该组件将重新渲染——然后 const something=useSelector(...) 将重新执行。然后你将拥有一个同名的新变量，并且该新变量将拥有新的值（但很快又会变得过时）。