# Checklist do Redux

*Antes de começar*
- [x] pensar como será o *formato* do seu estado global
- [x] pensar quais actions serão necessárias na sua aplicação

*Instalação*
- [x] npx create-react-app my-app-redux;
- [x] npm install --save redux react-redux;
- [x] npm install --save @redux-devtools/extension

*Criar dentro do diretório `src`:*
- [x] diretório `redux`

*Criar dentro do diretório `redux`*
- [x] arquivo `store.js`
- [x] diretório `actions`
- [x] diretório `reducers`

*Criar dentro do diretório `actions`:*
- [x] arquivo `index.js`.

*Criar dentro do diretório `reducers`:*
- [x] arquivo `index.js`.

*Criar dentro do arquivo `redux/store.js`:*
- [x] importar o createStore
- [x] configurar o [Redux DevTools](https://github.com/reduxjs/redux-devtools)
- [x] importar o rootReducer
- [x] criar e exportar a store

Exemplo:

```js
import { legacy_createStore as createStore } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
import rootReducer from './reducers';

const store = createStore(rootReducer, composeWithDevTools());

export default store;
```

*Criar dentro do arquivo `redux/reducers/index.js`:*
- [x] estado inicial
- [x] criar função reducer com `switch` retornando apenas a opção `default`
- [x] criar `rootReducer` usando o `combineReducers`
- [x] exportar `rootReducer`

Exemplo:

```js
import { combineReducers } from 'redux';

const INITIAL_STATE = {};

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

const rootReducer = combineReducers({ exampleReducer })

export default rootReducer;
```

*No arquivo `index.js`:*
- [ ] importar a `store`
- [x] importar o `Provider`, para fornecer os estados a todos os componentes encapsulados pelo `<App />`

Exemplo:

```js
// Na importação
import { Provider } from 'react-redux';
import store from './redux/store'
```

```js
// No render
 <Provider store={ store } >
   <App />
 </Provider>
```

*Na pasta `actions/index.js`:*
- [ ] criar e exportar os actionTypes

Exemplo:

```js
// ACTIONS TYPES
export const ADD_EMAIL = 'ADD_EMAIL';
```

- [ ] criar e export os actions creators necessários

Exemplo:

```js
// ACTIONS CREATORS
export const addEmail = (email) => ({
  type: ADD_EMAIL,
  email,
})
```

*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`

```js
// No import
import { connect } from 'react-redux';

// Acesso ao estado global
const mapStateToProps = (state) => ({
  email: state.email,
});

// No export
export default connect(mapStateToProps)(Component)
```

*Nos componentes que irão modificar o estado:*
- [ ] Importar a action creator a ser utilizada
- [ ] Desconstruir o dispatch via props
- [ ] Utilizar a função dispatch para enviar a action ao reducer

```js
// No import
import { addEmail } from './redux/actions';

// Disparando a action
const handleClick = () => {
  const { dispatch } = this.props;
  dispatch(addEmail('teste@teste.com'));
}
```