Skip to content

Instantly share code, notes, and snippets.

@isaacbatst
Forked from leticiabora/Checklist Redux
Last active October 5, 2022 01:56
Show Gist options
  • Save isaacbatst/cf8bbdbe3891eb42e49e9d1a6e2fe82a to your computer and use it in GitHub Desktop.
Save isaacbatst/cf8bbdbe3891eb42e49e9d1a6e2fe82a to your computer and use it in GitHub Desktop.

Checklist do react-redux

Antes de começar

  • pensar como será o formato do seu estado global
  • pensar quais actions serão necessárias na sua aplicação

Instalação

  • npx create-react-app my-app-redux;
  • npm install --save redux react-redux;

Criar dentro do diretório src:

  • diretório store

Criar dentro do diretório store

  • arquivo index.js
  • diretório actions
  • diretório reducers

Criar dentro do diretório actions:

  • arquivo index.js.

Criar dentro do diretório reducers:

  • arquivo index.js.

Criar dentro do arquivo reducers/index.js:

  • estado inicial
  • criar função reducer com switch retornando apenas a opção default
  • criar rootReducer usando o combineReducers
  • exportar rootReducer

exemplo:

const INITIAL_STATE = {};

const exampleReducer = (state = INITIAL_STATE, action) => {
 switch(action.type) {
   default:
    return state;
 }
}

const rootReducer = combineReducers({ exampleReducer })

No arquivo store/index.js:

  • importar rootReducer e usá-lo na criação da store
  • configurar o Redux DevTools
  • exportar a store

No arquivo App.js:

  • importar a store
  • definir o Provider, <Provider store={ store }>, para fornecer os estados a todos os componentes encapsulados em <App />.

Na pasta actions:

  • criar e exportar os actionTypes, por exemplo: const ADD_TO_CART = 'ADD_TO_CART';
  • criar e export os actions creators necessários

Nos reducers:

  • criar os casos para cada action criada, retornando o devido estado atualizado

Nos componentes que irão ler o estado:

  • criar a função mapStateToProps
  • exportar usando o connect

Nos componentes que irão modificar o estado:

  • criar a função mapDispatchToProps
  • exportar usando o connect
export default connect(mapStateToProps, mapDispatchToProps)(Component)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment