Blog: React

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.

Redux

Image without description

Foi inevitável aprender Reactjs e não olhar para o Redux.

Redux é uma biblioteca que gerencia estados em uma aplicação. Tirando a responsabilidade de um componente ter um estado que poderá ser usado por vários outros componentes dentro da sua aplicação por um objeto global.

O Redux cria um objeto global contento todos os estados que precisam ser acessados por diversos componentes que não se ligam.

Image without description

Componentes do Redux

Store: Nesse objeto que você vai guardar todos os estados que serão usados globalmente na sua aplicação. Quando um component precisar ler um estado, ele vai consultar o store;

Actions são ações que serão enviadas do seu component para acionar os Reducers. Ele serve apenas para informar qual função deverá rodar e qual é o dado que ela vai usar como parâmetro;

MiddleWares vão fazer toda a lógica necessária com o dado que será alterado no estado, dentro do Store.

Reducers Após o MiddleWare tratar os dados, os Reducers despacham esses dados para o reducer informar ao Store que o state foi alterado, e os demais componentes que precisarem usar esse novo estado são notificados;

Estrutura dos arquivos do Redux com Reactjs podem ser encontrados na pasta chamada store, dentro dessa pasta ficam os States, Reducers, MiddleWares e Actions.

Image without description

A estrutura dos middlewares é composta por funções que retornam outras funções.

getState: É uma função que será responsável por acessa um estado global da store;
dispatch: vai mandar o novo estado já tratado para o reducer pelas actions;
createStore: Função responsável por criar a store em si, é essa função que deixando todos os estados globais;
combineReducers: Cria um objeto com todos os estados e faz a ligação com os reducers para que a store guarda-los;
applyMiddleware: Intercepta as actions antes de chegar ao reducer para fazer toda a lógica;

Outro ponto importante é importando um Provider da biblioteca react-redux. Permitindo que os componentes tenham acesso a store.

Se você ouviu falar em Redux, também ouviu falar em hooks, que são os manipuladores de estados no seu componente.

useDispatch: Usado nos componentes para acionar os middlewares.
useSelector: função para acessar os nossos objetos com todos os estados da nossa store.

Esse post é um rascunho de um trabalho feito para eCommerce, por isso você deve ter reparado em alguns detalhes incomuns.

React com TypeScript

Image without description

Todo Desenvolvedor/Programador geralmente é focado e especializado em uma linguagem. Venho de uma linha mais generalista e até estou lendo um livro sobre, nas redes sosciais postei sobre, onde continuo a saga de entender se seria melhor ser um especialista ou generalista. Enquanto isso, me divirto aprendendo e agregando conhecimento. React.js e toda gama de libs e frameworks que agragam valor a uma solução não esta fora disso.

Faz +12 anos, talvez um pouco mais, que desenvolvo com tecnologia front-end e pouco mais de 1 ano que desenvolvo com React.js e e toda gama de libs e frameworks. Então a ideia é comentar um pouco.

Este tópico dá inicio a u básico de React com TypeScript. A ideia é evoluir agregando e mostrando o conhecimento com o passar do tempo e disponibilidade, claro.

Preciso antes, pincelar de leve sobre Yarn, um gerenciador de pacotes de códigos. Tão eficiente quanto o NPM e o Bower, que muito usei, o Yarn ganhou muitos adeptos.

Alguns comandos básicos que você precisa ou vai acabar conhecendo.

Para instalar uma dependência do seu arquivo package.json basta executar:

yarn add [pacote]

yarn add [pacote]@[versão]

yarn add [pacote]@[tag]

Para atualizar uma dependência

yarn upgrade [pacote]

yarn upgrade [pacote]@[versão]

yarn upgrade [pacote]@[tag]

Para remover uma dependência

yarn remove [pacote]

Para instalar todas as dependências de um projeto

yarn install

De volta ao tópico deste post.

React é muito simples e abrange uma complexa linha de possibilidades. Pra mim é uma das melhores bibliotecas front-end da atualidade.

TypeScript é uma linguagem de programação estrita e estaticamente tipada, tornando nosso código JavaScript mais previsível.

Para criar qualquer aplicativo usando o template do typescript, basta executar a linha de comando:

yarn create react-app todo-app --template typescript

A estrutura do nosso aplicativo deve ficar assim.

Image without description

Para executar e abrir o aplicativo no navegador, basta usar yarn start. E você tem uma estrutura básica pronta e funcional para criar.

Quanto ao TypeScript, existem duas possibilidades de uso, Tipos e interfaces (typescriptlang.org/docs/handbook/advanced-types.html)

Interface

interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

Alias ​​do tipo

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

Image without description