Blog: Redux Context API

Redux vs Context API

Image without description

Caso na postagem sobre Redux você tenha entendido que puramente com o React passar dados para as props dos filhos dos filhos requer um pouco mais, você entendeu tudo.

Mas outra forma de resolver o problema, além de Redux, seria o gerenciamento de estado como Context API. O difícil é saber qual o mais adequado para sua aplicação.

A Context API, em um aplicativo React típico, os dados são passados ​​de cima para baixo (pai para filho) por meio de props, mas esse uso pode ser complicado para certos tipos de props (por exemplo, preferência de localidade, tema de interface do usuário) que são exigidos por muitos componentes dentro de um aplicativo. O contexto fornece uma maneira de compartilhar valores como esses entre componentes sem ter que passar explicitamente um prop por todos os níveis da árvore.

A Context API é uma ferramenta React integrada que não influencia o tamanho final do pacote e é integrada por design.

Para usar a Context API, você precisa:

Crie o contexto const Context = createContext(MockData);

Criar um provedor para o contexto

const Parent = () => {
    return (
        <Context.Provider value={initialValue}>
            <Children/>
        </Context.Provider>
    )
}

Consumir os dados no Contexto

const Child = () => {
    const contextData = useContext(Context);
    // use the data
    // ...
}

Já o Redux é um contêiner de estado previsível para aplicativos JavaScript. Ajudando na escrita de aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.

Redux é uma biblioteca de código aberto que fornece um armazenamento central e ações para modificar o armazenamento. Ele pode ser usado com qualquer projeto usando JavaScript ou TypeScript.

Para usar o Redux você precisa:

Create a Reducer

import { createSlice } from "@**Redux**js/toolkit";

export const slice = createSlice({
    name: "slice-name",
    initialState: {
        // ...
    },
    reducers: {
        func01: (state) => {
            // ...
        },
    }
});

export const { func01 } = slice.actions;
export default slice.reducer;

Configure the Store

import { configureStore } from "@**Redux**js/toolkit";
import reducer from "./reducer";

export default configureStore({
    reducer: {
        reducer: reducer
    }
});

Make the Store available for data consumption

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-**Redux**';
import App from './App.jsx'
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Use State or Dispatch Actions

import { useSelector, useDispatch } from 'react-**Redux**';
import { func01 } from './**Redux**/reducer';

const Component = () => {
    const reducerState = useSelector((state) => state.reducer);
    const dispatch = useDispatch();
    const doSomething = () = > dispatch(func01)  
    return (
        <>
            {/* ... */}
        </>
    );
}
export default Component;

Então, como resultado comparativo final, posso levantar alguns pontos, inclusive alguns coletei na web para ter mais insumos. Se a ideia é apenas passar dados de pai para filho, o uso da Context API te atende. Mas se a ideia é trabalhar com muitos dados dinâmicos, o Redux seria a solução.