Reactjs 多次调用useReducer'；s调度器，以及它'；它需要是同步的

有一个棋盘游戏，每次用户改变一个方块中的某个东西都会影响所有其他方块的状态。要更改方块的状态，我使用

useReducer

，要处理其他方块的更改，我使用

useffect

问题是当用户请求计算机自行解决问题时（有这样一个选项）。我的首选解决方案是触发一个递归函数（

resolveBoard

），该函数遍历所有的方块，并逐个更改它们。在每个方格中要做什么的计算是基于前面方格中先前决策的副作用（上面提到的

useffect

应该做什么）。 不幸的是，

useReducer

的dispatcher（因此，

useffect

）只有在递归函数完成后才被调用，从而破坏了计算并导致返回错误的结果

如何做到这一点

const [squaresValues, dispatchSquaresValue] = useReducer(
    setSquaresValue,
    { rows: props.rows, columns: props.columns },
    InilizeBoard
  );

useEffect(() => { 
   calculateValues();
}, [squaresValues]);

function resolveBoard(row, index) {
...

   if (resolveSingleSquare(row, index)) {
     const nextIndex = ...
     const nextRow = ....
     return resolveBoard(nextRow, nextIndex);
   } 
   return false;
} 

function resolveSingleSquare(row, index) {
   ...calculations based on the state of the others squares
   if (working) {
      dispatchSquaresValue(squareProp);
      return true;
    }
    return false;
}
function setSquaresValue(prevValues, squareProp) {
--- be called only after all finished:(
}

---

Ciao，以便在重新调用resolveBoard（nextRow，nextIndex）之前调度

dispatchSquaresValue

您必须使用承诺机制。因此，您不能使用

useReducer

。有几种方法可以解决您的问题，我使用了2种：

重复承诺：

export const updateSquareValue = (key, value)=>
Promise.resolve({
   type:'UPDATE_SQUARE_VALUE',
   key, value
})

export const updateSquareValue = (key, value) => dispatch => {
   dispatch({
      type: 'UPDATE_SQUARE_VALUE',
      key,
      value,
   });
   return Promise.resolve();
};

然后在组件中：

import { useDispatch } from 'react-redux';
...
const dispatch = useDispatch();
...
function resolveBoard(row, index) {
    ...
    dispatch(updateSquareValue(squareProp)).then(() => {
       resolveBoard(nextRow, nextIndex);
    });
}

import { useDispatch } from 'react-redux';
...
const dispatch = useDispatch();
...
function resolveBoard(row, index) {
   ...
   dispatch(updateSquareValue(squareProp)).then(() => {
      resolveBoard(nextRow, nextIndex);
   });
 }

redux thunk：

export const updateSquareValue = (key, value)=>
Promise.resolve({
   type:'UPDATE_SQUARE_VALUE',
   key, value
})

export const updateSquareValue = (key, value) => dispatch => {
   dispatch({
      type: 'UPDATE_SQUARE_VALUE',
      key,
      value,
   });
   return Promise.resolve();
};

然后在组件中：

import { useDispatch } from 'react-redux';
...
const dispatch = useDispatch();
...
function resolveBoard(row, index) {
    ...
    dispatch(updateSquareValue(squareProp)).then(() => {
       resolveBoard(nextRow, nextIndex);
    });
}

import { useDispatch } from 'react-redux';
...
const dispatch = useDispatch();
...
function resolveBoard(row, index) {
   ...
   dispatch(updateSquareValue(squareProp)).then(() => {
      resolveBoard(nextRow, nextIndex);
   });
 }

---

非常感谢。实际上，我不熟悉这些工具，我需要使用redux吗？我不明白什么是

newValue

应该是什么。您好，是的，您需要安装

redux

（创建店铺）、

react redux

（针对店铺提供商）和

redux promise

（发送承诺）

newValue

应该是

squareProp

（传递给

dispatchSquaresValue

的对象）。我会更新答案。谢谢。我想知道是否有一种方法可以只使用React钩子或/和React上下文来解决我的问题，因为我不想使用Redux。