alex-yudi / estudo-redux

Partes importantes do redux:

• Store Responsável por armazenar os dados que serão utilizados no projeto (Por recomendação, deve-se ter apenas UM deles por projeto). Se comparado com a API de Contexto, seria o local onde os states ficam armazenados.

• Provider Será responsável por disponibilizar os dados da store, ele que sinaliza os locais que terão acesso.

• Reducer / Slice Encarregado de lidar/processar todas as ações que podem ser realizadas com um determinado dado da store. Idealmente cada dado deve ser seu próprio reducer.

• Actions / Dispatch São as ações específicas que podem ser realizadas, por exemplo, uma "action de trocar nome". Obs.: As actions em si não fazem NADA além de mandar o dado para o reducer.

• Selector Responsável por pegar os dados que estão na store.

---

Criando o Redux: OBS.: É necessário instalar o redux, react-redux e @reduxjs/toolkit - Dentro do /src, deve-se criar um arquivo redux - Dentro da pasta redux, crio uma pasta com o nome reducers que será responsável por armazenar os reducers do projeto

Para criar o reducer, será necessário:
    - Importar o `createSlice` do @reduxjs/toolkit
    - Instanciar essa importação
        Ex.: const slice = createSlice()
    - Nesse instânciamento, dentro dele será necessário passar um objeto, que conterá as informações: `name`, `initialState`, `reducers`
    - Após a criação desse instânciamento, devo fazer a exportação default do reducer dele (export default slice.reducer)
    -Também faço a exportação dos actions que eu desejar (export const {} = slice.actions)

Criando a Store:
    - Dentro da pasta `redux`, devo criar um arquivo com o nome `store` (o formato pode ser o js ou ts)
    - No arquivo, devo fazer a importação do `configureStore` do `@reduxjs/toolkit`
    - Após isso, devo fazer o instânciamento dessa `configure`
    - Dentro dele, devo colocar um objeto com a propriedade `reducer` que, dentro dele, será outro objeto com todos os reducers que existirem no projeto (uso a propriedade, dando o nome dele e coloco o reducer nele). Será necessário fazer a importação do reducer no arquivo.
        Obs.: Existe um detalhe de exportação de tipos, caso o Typescript esteja sendo utilizado, está adicionado o código no store desse repositório, com a explicação.

Criando o Provider:
    - Após a criação da store, deve-se ir no index do projeto
    - importar o `Provider` do `react-redux` e o import do `store`
    - Após isso, devo "encapsular" a <Main> no <Provider>
    - O <Provider> terá uma props `store` que recebe a própria store importada
        <Provider store={store}>

Utilizando os dados do Reducer No react-redux existe um hook para pegar as informações do reducer (useSelector) Será necessário a importação desse hook nos locais que eu desejar ter acesso a alguma informação. - Após a importação, dentro do component, devo utilizar o useSelector, ele recebe uma callback que recebe como parâmetro um state e vai retornar o reducer que eu desejar. - Depois de fazer esse processo, basta utilizar o acesso da variável que eu tiver declarado que ela vai possuir os dados que eu desejava.

Alterando os dados do Reducer para fazer isso, será necessário a importação do useDispatch do react-redux - O useDispatch deve ser instânciado, para ser utilizado como função ao longo dos locais desejados. - Também será necessário fazer o import das actions existentes no reducer(lembrar que elas ficam marcadas para exportação, dentro do arquivo do reducer) - O dispatch será uma função que recebe uma callback, sendo essa callback a action que eu desejar/tiver feito a importação.