javascript - 从 react reducer 设置状态返回正确的值但不会导致重新渲染

Question

我刚刚为我的排序算法可视化工具实现了 reducer，并试图将我的数组的状态设置为排序算法的结果。我 99% 确定我的 reducer 正在接收排序的数组然后返回它(因为我做了一些 console.logs)，我也很确定变量本身确实发生了变化。
这是我的 reducer 和数组变量(*注意，值将是函数中的数组):

export const ACTIONS = {
    SET_VALUES: 'set-values'
}

function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.SET_VALUES:
      console.log(action.payload.values)
      return action.payload.values
    default:
      return state
  }
}


const [values, dispatch] = useReducer(reducer, [])

这是调用 dispatch 的排序算法:

  export function bubbleSort(array, dispatch) {
    var testArray = array
    console.log('sorting')
    var sorted = false
    while (!sorted) {
        var changed = false;
        for (var i = 0; i < testArray.length-1; i++) {
            if (testArray[i] > testArray[i+1]) {
                changed = true;
                var smaller = testArray[i]
                testArray[i] = testArray[i+1]
                testArray[i+1] = smaller
            }
        }
        if (!changed) {
            sorted = true
        }
    }
    dispatch({ type: ACTIONS.SET_VALUES, payload: { values: testArray}})
    console.log('sorted')
    console.log(array)   
} 

当打印传递给函数的原始数组(值)时，它被排序。但是，屏幕上反射(reflect)数组本身的条形不会改变，这让我相信不会发生重新渲染，并且条形使用的是变量(值)的旧状态。有谁知道如何解决这一问题？

Answer 1

你几乎一切都对了。问题是 React 使用引用相等 a===b检查是否发生了变化。因此，由于您对数组进行了就地排序，因此引用没有更改，因此所有 useReducer钩锯是那个state===state所以它没有重新渲染。
我所做的只是在冒泡排序开始时创建一个新数组，这样它就不会发生变异。var testArray = array.slice();

const { useReducer } = React;
const ACTIONS = {
  SET_VALUES: "set-values",
};

function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.SET_VALUES:
      console.log(action.payload.values);
      return action.payload.values;
    default:
      return state;
  }
}

function bubbleSort(array, dispatch) {
  var testArray = array.slice();
  console.log("sorting");
  var sorted = false;
  while (!sorted) {
    var changed = false;
    for (var i = 0; i < testArray.length - 1; i++) {
      if (testArray[i] > testArray[i + 1]) {
        changed = true;
        var smaller = testArray[i];
        testArray[i] = testArray[i + 1];
        testArray[i + 1] = smaller;
      }
    }
    if (!changed) {
      sorted = true;
    }
  }
  dispatch({ type: ACTIONS.SET_VALUES, payload: { values: testArray } });
  console.log("sorted");
  console.log(array);
}

const App = () => {
  const [values, dispatch] = useReducer(reducer, [5, 2, 3, 9, 10, 234, 432, 1]);

  return (
    <div>
      <button
        onClick={() => {
          bubbleSort(values, dispatch);
        }}
      >Sort</button>
      <div>{values.join(", ")}</div>
    </div>
  );
};

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>