Acabo de implementar reductores para mi visualizador de algoritmo de clasificación y estoy tratando de establecer el estado de mi matriz para que sea el resultado de un algoritmo de clasificación. Estoy 99% seguro de que mi reductor recibe la matriz ordenada y luego la devuelve (porque hice algunos registros de consola), y también estoy bastante seguro de que la variable en sí cambia.
Aquí está mi reductor y variable de matriz (* tenga en cuenta que los valores serán una matriz en la función):
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, [])Y aquí está el algoritmo de clasificación donde se llama al envío:
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) }Al imprimir la matriz original (valores) pasada a la función, se ordena. Sin embargo, las barras en la pantalla que reflejan la matriz en sí no cambian, lo que me lleva a creer que no se está produciendo una nueva representación y que las barras están usando un estado antiguo de la variable (valores). ¿Alguien sabe cómo arreglar esto?
Tenías casi todo correcto. El problema era que React usa la igualdad referencial a===b para verificar si algo ha cambiado. Entonces, dado que ordenó la matriz en su lugar, la referencia no cambió, por lo que toda la sierra de gancho useReducer es ese state===state , por lo que no se volvió a procesar.
Todo lo que cambié fue crear una nueva matriz al comienzo de la ordenación de burbujas para que no se mutara.
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"/>