Soy nuevo en reaccionar, redux y me estoy esforzando por comprender el tutorial de redux-toolkit que sigo. Tengo la rebanada de la siguiente manera.
const initialState = { count: 0, }; export const counterSlice = createSlice({ name: "counter", initialState, reducers: { increment: (state) => { state.count += 1; }, }, }); export const { increment } = counterSlice.actions; export default counterSlice.reducer; export const incrementTest = () => (dispatch) => { dispatch(increment()); }; Luego uso esa acción incrementTest de la siguiente manera
<button onClick={() => dispatch(incrementTest())}> + </button>Quiero entender lo siguiente.
En la siguiente función
export const incrementTest = () => (dispatch) => { dispatch(increment()); }; devolvemos una función que toma el argumento como dispatch y luego llamamos a la función de dispatch proporcionada con el argumento de otro increment de función que se define arriba y se exporta.
Sin embargo, cuando llamamos a esta función, usamos dispatch(incrementTest()) proporcionando incrementTest como un parámetro para dispatch . No entiendo este concepto. ¿Qué concepto en javascript debo estudiar más para aprender esto?
También el reductor increment toma el state como parámetro (y action también en algunos casos). Quién proporciona este ( state,action ) a esta función como lo llamamos dispatch(incrementTest())
Así que esto:
export const incrementTest = () => (dispatch) => { dispatch(increment()); }; es un ejemplo de un procesador thunk, una función que es llamada (por un middleware redux) con dos argumentos, dispatch y getState . Por lo general, se usa para coordinar el trabajo asíncrono, ya que puede await cosas dentro de la función o tratar con promesas. Busque el middleware thunk si quiere saber más. No estoy seguro de por qué hicieron que esta acción fuera un golpe, no hay necesidad de hacerlo, tal vez para probarlo.
A su segunda pregunta, la biblioteca sí. Todo lo que hace es llamar a dispatch() con una acción, la biblioteca llama a la función reductora con el estado actual y su acción. Piense en ello como emitiendo un evento. Su trabajo es crear el evento, la biblioteca se encarga de actualizar el estado global en consecuencia. El reductor está escrito declarativamente, más o menos. Como en "¿cómo debería cambiar el estado global si ocurriera ese evento específico?".
En Redux-Toolkit, el método createSlice nos ayuda a crear una porción de redux-store. Esta función tiene como objetivo reducir el repetitivo requerido para agregar datos a redux de forma canónica. Internamente, usa createAction y createReducer .
createSlice mira todas las funciones que están definidas en el campo de reductores y para cada caso genera un creador de acción que usa el nombre del reductor como el tipo de acción en sí.
En el código anterior, el reductor de incremento creado anteriormente se convirtió en un tipo de acción de counter/increment , y el creador de la acción increment() devolverá una acción con ese tipo.
Ahora todos los reductores en el objeto reductores en createSlice tienen acceso al state y también puedes manipular el state desde allí.