如何計算一個值在 React 中一小時/一天內有多少次為真？

Question

我正在編寫一個鬧鍾應用程序，想計算一個小時和一天內觸發鬧鍾的次數。 我使用 redux 工具包來處理警報的 state（真/假）和減速器countAlarm來增加計數。 現在handleCount會在每次alarmValue為真時調度countAlarm 。 我想計算alarmValue在一個小時內和一天內有多少次為真。 我怎么做？

      const dispatch = useDispatch();
      const countValue = useSelector((state) => state.count.value);
      const alarmValue = useSelector((state) => state.alarm.active);

      const handleCount = () => {
        if (alarmValue) {
        dispatch(countAlarm());
      }}

      useEffect(() => {
        handleCount()
      }, [alarmValue])

      return (
        <View>
          <Text>{countValue}</Text>
        </View>

        ...

countAlarm ：

    import { createSlice } from '@reduxjs/toolkit';

    const initialStateValue = {
        value: 0
    }

    const countSlice = createSlice({
        name: 'count',
        initialState: initialStateValue,
        reducers: {
            countAlarm: (state = initialStateValue) => {
                state.value++;
            },
        }
    });

    export const {countAlarm} = countSlice.actions;
    export default countSlice.reducer;

alarmValue ：

    import { createSlice } from '@reduxjs/toolkit';

    const initialStateValue = {
        active: false,
    }

    const alarmSlice = createSlice({
        name: 'alarm',
        initialState: initialStateValue,
        reducers: {
            alarmOn: (state = initialStateValue) => {
                state.active = true;
            },
            alarmOff: (state = initialStateValue) => {
                state.active = false;
            },
        }
    });

    export const {alarmOn, alarmOff} = alarmSlice.actions;
    export default alarmSlice.reducer;

Answer 1

一小時/一天是什么意思？ 我會 append 數據：

const initialStateValue = {
        value: 0,
        numberOfAlarmsInDay: 0
        numberOfAlarmsPerHour: {
           perFirstHour: 0,
           perSecondHour: 0,
           ...
        }
    }

那么，你需要

• 要么是 PayloadAction 的時間，要么是你讀取 reducer 中的系統數據之類的東西來確定要設置哪個計數器
• 新的一天重置值的觸發器，很可能是另一個動作。 如果你想在減速器中這樣做（新一天的第一個警報），你需要保留這一天以知道何時再次重置 -> 但數據可能是臟的！

希望這能幫助你進一步進步！

Answer 2

你不應該真的 go 這個“迂回通過組件”。 相反，讓您的countSlice僅對alamSlice的alarmOn操作做出反應：

    import { createSlice } from '@reduxjs/toolkit';
    import { alarmOn } from './alarmSlice'

    const initialStateValue = {
        value: 0
    }

    const countSlice = createSlice({
        name: 'count',
        initialState: initialStateValue,
        reducers: {
          // reducers for "this slice"
        },
        extraReducers: builder => {
          // reducers for actions owned by other slices
          builder.addCase(alarmOn, (state) => { state.value++; })
        }
    });

請參閱 Redux 樣式指南中的允許多個減速器響應相同的操作。

（當然，您也可以將counter保留在alarmSlice中；取決於復雜性，這也可能是一個很好的解決方案）

PS：不要做(state = initialStateValue) => { - 你不需要像這樣初始化你的 state ， createSlice會處理這個。