Skip to content

Instantly share code, notes, and snippets.

@leticiabora
Last active April 10, 2023 23:25
Show Gist options
  • Save leticiabora/ffde22cd1c284bb963dcd0592aa8299f to your computer and use it in GitHub Desktop.
Save leticiabora/ffde22cd1c284bb963dcd0592aa8299f to your computer and use it in GitHub Desktop.
======================= AVISO =======================
Hey! Esse gist tá desatualizado! Use o redux toolkit :D
=====================================================
# 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;
- [ ] npm install.
*Criar dentro do diretório src:*
- [ ] diretório redux
**Criar dentro do diretório redux**
- [ ] diretório actions;
- [ ] diretório reducers;
- [ ] diretório store.
*Criar dentro do diretório actions:*
- [ ] arquivo index.js.
*Criar dentro do diretório reducers:*
- [ ] arquivo index.js.
- [ ] criar a estrutura do reducer, como ainda não sabemos as actions necessárias, você pode apenas retornar o default do switch.
- [ ] configurar os exports do arquivo index.js usando o combineReducers
exemplo:
const initial_state = {
meuEstado: '',
};
const reducer = (state = initial_state, action) => {
switch(action.type) {
default:
return state;
}
}
*No arquivo store/index.js:*
- [ ] importar o arquivo com o combineReducer e criar a store
- [ ] configurar o [Redux DevTools](https://github.com/reduxjs/redux-devtools)
*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 os actionTypes, por exemplo: `const ADD_TO_CART = 'ADD_TO_CART';`
- [ ] criar os actions creators necessários
*Nos componentes:*
- [ ] criar a função mapStateToProps
- [ ] criar a função mapDispatchToProps
- [ ] importar e usar o connect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment