Saltar al contenido

Introducción a useReducer gancho en ReactJan, 23rdIn el tutorial vamos a aprender acerca de cómo administrar el estado en el …

marzo 13, 2020

 

En el tutorial vamos a aprender acerca de cómo administrar el estado de reaccionar mediante el uso de useReducer gancho.

¿Cuál es Reductor?

Si usted sabe sobre redux entonces usted está familiarizado con la función de reductor.

un reductor es una función de JavaScript que tiene el estado de estado de la aplicación inicial de dos argumentos, el tipo de acción y vuelve atrás aplicación nueva.

useReducer gancho

useReducer gancho es alternativa a useState gancho, pero mediante el uso de gancho useReducer podemos gestionar la lógica compleja en nuestro estado reaccionan componentes.

En su aplicación reaccionan crear un nuevo archivo llamado reducer.js.

export default function reducer(state, action) {
switch (action.type) {
case "INC":
return { ...state, num: state.num + 1 };
case "DEC":
return { ...state, num: state.num - 1 };
default:
return state;
}
}

Esta es una función reductor con dos parámetros de estado, la acción cada vez que estamos volviendo nuevo estado de la aplicación en lugar de la mutación del viejo Estado porque reductor es una función pura. de

Let Con nuestro motor reductor.

useReducer ejemplo gancho

import React, { useReducer } from "react";
import reducer from "./reducer";

function App() {
const [state, dispatch] = useReducer(reducer, { num: 0 });
return (

{/*accessing the state*/}

{state.num}

{/* dispatching the type of action*/}

);
}

export default App;

En el código anterior, hemos creado el componente de aplicaciones y la función reductor importado de archivo ‘’ reducer.js y el gancho useReducer de la biblioteca ‘reaccionar’.

useReducer gancho acepta dos argumentos primer argumento es función de reductor y segundo argumento es estado de la aplicación inicial entonces de regreso matriz con estado dos valores, la función de despacho. Estado

: corriente state.dispatch aplicación: Esta es una función que se utiliza para actualizar el estado, pasando tipo de acción.

Cómo pasar del estado a los componentes hijos?

También podemos pasar el gancho por el estado useReducer a los componentes hijos mediante el uso de la API Contexto React.

import React, { useReducer,createContext} from "react";
import reducer from "./reducer";
import Counter from './counter'

export const MyContext = createContext(null);
function App() {
const [state, dispatch] = useReducer(reducer, { num: 0 });
return (


);
}

export default App;

En el código anterior hemos creado MyContext mediante la invocación de la función createContext con valor nulo intial A continuación, el componente wapped Contador con componente MyContext.Provider pasando thevalue prop {Estado, la expedición}.

Ahora podemos acceder a la función del Estado y de despacho dentro del componente de contador.

import React, { useContext } from "react";
import { MyContext } from "./index";

function Counter() {
const { state, dispatch } = useContext(MyContext);
return (

{/*accessing the state*/}

{state.num}

{/* dispatching the type of action*/}

);
}

export default Counter;

Aquí se utiliza el gancho useContext que se utiliza para consumir los datos pasados ​​por el componente del proveedor.