javascript - 如何使用具有定期更新和 React Hooks 的 Redux 来处理状态？

Question

我的用例

我刚刚开始使用带有 Hooks 和 Redux 的 React(Native)，并且在理解我的用例的状态更新概念的某些部分时遇到一些问题。我目前正在开发一个 React Native 应用程序，该应用程序应该每整分钟更新一次数据。因此，如果用户在 11h:31m:27s 进入应用程序，

1. 应该显示初始状态，然后
2. setTimeout 处理第一次更新，其偏移量达到整分钟(在本例中 33s 达到 11h:32m:00s )
3. setInterval 从现在开始处理数据的每分钟更新。

我的问题

目前，使用下面的代码，reducers.js 文件中的 console.log("Reducer Fires!") 每过一分钟就会被触发越来越多(例如第一分钟仅一次，第二分钟两次，依此类推)。因此，我觉得我在处理数据状态以及 setInterval() 和 setTimeout() 逻辑的方式上仍然存在问题。有人可以查看下面的代码并指出我正在执行的错误吗？

我的代码(到目前为止)

一些虚拟数据:

export const DATA = [
    {"id": 1, "myAttr": 0},
    {"id": 2, "myAttr": 4},
    {"id": 3, "myAttr": 8},
    {"id": 4, "myAttr": 12},
]

<小时/>

带有 redux 存储的 App.js 文件:

import React from 'react';
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { View } from 'react-native';

// Components
import MyComponent from "./components/MyComponent";
import dataReducer from "./store/reducers";

//Create Redux store
const rootReducer = combineReducers({
  mydata: dataReducer
});

const store = createStore(rootReducer);

export default function App() {

  return (
    <Provider store={store} >
      <View>
        <MyComponent />
      </View>
    </Provider>
  );
}

<小时/>

存储我的 Redux 操作的 actions.js 文件:

//Action to update the data
export const UPDATE_DATA = "UPDATE_DATA";

export const updateData = () => {
    return { type: UPDATE_DATA }
}

<小时/>

用于存储 reducer 的reducers.js文件:

import { DATA } from "../data/data";
import { UPDATE_DATA } from "./actions";

// Initial state when app launches
const initState = {
    data: DATA
}

const dataReducer = (state = initState, action) => {
    switch (action.type) {
        case UPDATE_DATA:
            //Update an attribute in each object of the data array

            const updatedData = state.data.map((i) => {
                const newMyAttr = i.myAttr + 1;
                return { ...i, myAttr: newMyAttr }
            }
            )

            console.log("Reducer Fires!");
            return { ...state, data: updatedData }

        default:
            return state;
    }
};

export default dataReducer;

<小时/>

我尝试更新状态的组件:

import React, { useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Text, View } from 'react-native';

const MyComponent = (props) => {
    const myData = useSelector(state => state.mydata.data);

    let start = new Date();
    const fullMinuteOffset = (60 - start.getSeconds()) * 1000;

    const dispatch = useDispatch();

    const saveData = useCallback(() => {
        dispatch(updateData())
    }, [dispatch]);

    useEffect(() => {
        const timer = setTimeout(() => {
            saveData()
            const interval = setInterval(() => {
                saveData()
            }, 60000)

            return () => clearInterval(interval);
        }, fullMinuteOffset);

        return () => clearTimeout(timer);
    }, [saveData, fullMinuteOffset]);

    return(
        <View>
            <Text>{myData[0].myAttr}</Text>
        </View>
    );
};

export default MyComponent;

Answer 1

每次组件渲染时，它都会有一个新的 fullOffserMinute 值，它是 useEffect 的依赖项，从而注册一个新的间隔调用。

这是代码的简化工作示例:

https://codesandbox.io/s/jolly-panini-k35s1?fontsize=14&hidenavigation=1&theme=dark

  // the relevant part of it
  let start = new Date();
  let [counter, setCounter] = useState(0);
  const fullMinuteOffset = (60 - start.getSeconds()) * 1000;

  function timerAction() {
    setCounter(counter => counter + 1);
  };

  useEffect(() => {
    console.log("-- use effect --");
    const timer = setTimeout(() => {
      console.log("save data timeout");
      timerAction();
      const interval = setInterval(() => {
        console.log("save data interval");
        timerAction();
      }, 5000);

      return () => clearInterval(interval);
    }, fullMinuteOffset);

    return () => clearTimeout(timer);
  }, []);

如果您要定期更新本地状态，您还应该阅读此处的答案: State not updating when using React state hook within setInterval