Checklist Redux com Truck & Tests

checklist-redux.md

Checklist do 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 --save redux-devtools-extension

Criar dentro do diretório src:

• diretório redux

Criar dentro do diretório redux:

• diretório store
• diretório actions
• diretório reducers

Criar dentro do diretório store:

• arquivo index.js.

Criar dentro do diretório actions:

• arquivo index.js.

Criar dentro do diretório reducers:

• arquivo index.js.
• arquivo exampleReducer.js

Criar dentro do arquivo redux/store/index.js:

• importar o createStore
• importar applyMiddleware
• importar o thunk
• importar o Redux DevTools
• importar o rootReducer
• criar e exportar a store

Exemplo:

import { legacy_createStore as createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; // ou '@redux-devtools/extension'
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

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

export default store;

Criar dentro do arquivo redux/reducers/exampleReducer.js

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

Exemplo:

const INITIAL_STATE = {};

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

export default exampleReducer;

Criar dentro do arquivo redux/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:

import { combineReducers } from 'redux';
import exampleReducer from './exampleReducer';

const rootReducer = combineReducers({ exampleReducer })

export default rootReducer;

No arquivo index.js:

• importar a store
• importar o Provider, para fornecer os estados a todos os componentes encapsulados pelo <App />

Exemplo:

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

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

Na pasta actions/index.js:

• criar e exportar os actionTypes

Exemplo:

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

• criar e export os actions creators necessários

Exemplo:

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

Nos reducers:

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

Exemplo de Criação:

import { ADD_EMAIL } from '../actions';

// const INITIAL_STATE = {};

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

// export default exampleReducer;

Nos componentes que irão ler o estado:

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

Exemplo mapStateToProps:

// Criando mapStateToProps 
const mapStateToProps = (state) => ({
  nomePropsGenerica: state.exampleReducer
})

// Utilizando mapStateToProps 
  funcaoExtremamenteGenerica2() {
  const { nomePropsGenerica } = this.props;
  console.log(nomePropsGenerica);
}

Nos componentes que irão modificar o estado:

• exportar a action que será utilizada
• criar a função mapDispatchToProps

Exemplo Dispatch:

// Criando Dispatch 
const mapDispatchToProps = (dispatch) => ({
  addMyEmail: (email) => dispatch(addEmail(email))
});

// Utilizando Dispatch
funcaoExtremamenteGenerica(email) {
  const { addMyEmail } = this.props;
  addMyEmail(email)
}

Forma Alternativa de usar o dispatch:

// Utilizando Dispatch
funcaoExtremamenteGenerica(email) {
  const { dispatch } = this.props;
  dispatch(addEmail(email));
}

Fazer a conexão utilizando o connect:

• exportar o connect
• conectar o dispatch ou o mapStateToProps

Exemplo Connect:

// No import
import { connect } from 'react-redux';
import { addEmail } from '../redux/actions';

// No export
export default connect(mapStateToProps, mapDispatchToProps)(Component)