checklist-redux.md

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

• npm i redux react-redux;
• npm i -D @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 actions:

• arquivo index.js.

Criar dentro do diretório reducers:

• arquivo index.js.

Criar dentro do diretório store:

• arquivo index.js.

Criar dentro do diretório reducers:

• criar os reducers necessários
• criar rootReducer usando o combineReducers no arquivo index.js

exemplo:

Seu reducer pode seguir esse modelo.

const INITIAL_STATE = {};

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

export default nomeReducer1;

import { combineReducers } from 'redux';
import nomeReducer1 from './nomeReducer1';
import nomeReducer2 from './nomeReducer2';

const rootReducer = combineReducers({
  nomeReducer1,
  nomeReducer2,
});

export default rootReducer;

No arquivo store/index.js:

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

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

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

export default 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;`
• criar e exportar os actions creators necessários

Exemplo de action types (arquivo actionTypes.js)

export const USER_LOGIN = 'USER_LOGIN';

Exemplo action creator

import { USER_LOGIN } from '../actions/actionTypes';
export const minhaAction = (value) => ({ type: USER_LOGIN, value });

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)

novo devtools -> npm install --save @redux-devtools/extension
nova importação no store -> import { composeWithDevTools } from '@redux-devtools/extension';