Redux在非反应功能中

debugcn 发表于 Dev

马林

我试图将节点快递服务器的状态与redux存储中的状态进行比较。如果状态不同，我想将存储状态更新为与服务器状态相同的值。现在我遇到了一个问题，我不能在非反应函数中使用这些钩子。我需要它来工作，但是我已经查看了redux文档，据我了解，这些钩子只能在react函数组件中使用。由于我的整个应用程序已经基于redux状态，因此还有另一种方法可以使这项工作继续进行。

import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

 /**
 * get the gamestate from the server
 * @returns {Promise<{data: any}>}
 */
async function getGamestate() {
    const gameStates = await fetch('http://localhost:3000/game-state').then(response => response.json());
    return {
        data: gameStates,
    }
}


export async function CheckIfChanged(){
    const serverGameState = await getGamestate();
    const clientGameState = useSelector(state => state.gameState);

    if(serverGameState.data !== clientGameState){
        console.log(serverGameState)
        //UpdateGameState(serverGameState)

    }else {
        console.log("still the same")
    }
}

更新：我打算在主视图中调用此函数，基本上这是整个应用程序中使用的包装器。每隔5秒钟左右就会调用一次checkIfChanged函数。

import React from 'react';
import '../../style/App.scss';
import Wrapper from '../wrapper/wrapper';
import StartView from '../startview/StartView';
import { useSelector } from 'react-redux';

function MainView(){

  const gameState = useSelector(state => state.gameState);

  //arround here i would call it and will be updating every 5 seconds later
  checkIfChanged();

  switch (gameState) {
    case "notStarted":
      return (
        <StartView/>
      );
    case "video":
    case "keypad":
    case "puzzle":
    case "completed":
    case "failed":
      return (
        <Wrapper/>
      );
    default:
    return (
      <div className="contentArea">
        <h1>Er is een fout opgetreden</h1>
      </div>
    );
  }

}
export default MainView;

Shubham Khatri

您不能直接在渲染中定义带有钩子的异步方法。但是，您可以在自定义钩子中转换函数，然后可以使用useSelector并实现useEffect同步您的更改

import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

 /**
 * get the gamestate from the server
 * @returns {Promise<{data: any}>}
 */
async function getGamestate() {
    const gameStates = await fetch('http://localhost:3000/game-state').then(response => response.json());
    return {
        data: gameStates,
    }
}


export function useCheckIfChanged(){ // not an async function
    const clientGameState = useSelector(state => state.gameState);
    const clientGameStateRef = useRef(clientGameState); 
    // Using a ref since we can't add clientGameState as a dependency to useEffect and it is bounded by closure

    useEffect(() =-> {
        clientGameStateRef.current = clientGameState;
    }, [clientGameState]);

    useEffect(() => {
          setInterval(async() => {
             const serverGameState = await getGamestate();
             // value inside here for clientGameState will refer to the original state only and hence we are using a ref which we update in another useEffect
             if(serverGameState.data !== clientGameStateRef.current){
                  console.log(serverGameState)
                 //UpdateGameState(serverGameState)

             }else {
                 console.log("still the same")
             }
          }, 5000)
    }, []);

}

import React from 'react';
import '../../style/App.scss';
import Wrapper from '../wrapper/wrapper';
import StartView from '../startview/StartView';
import { useSelector } from 'react-redux';

function MainView(){

  const gameState = useSelector(state => state.gameState);
  useCheckIfChanged(); // using the custom hook here

  switch (gameState) {
    case "notStarted":
      return (
        <StartView/>
      );
    case "video":
    case "keypad":
    case "puzzle":
    case "completed":
    case "failed":
      return (
        <Wrapper/>
      );
    default:
    return (
      <div className="contentArea">
        <h1>Er is een fout opgetreden</h1>
      </div>
    );
  }

}
export default MainView;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。