Checklisr para pessoas estudantes implementarem o Redux

Checklist Redux

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

• arquivo store.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 redux/store.js:

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

Exemplo:

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:

• 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';

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
• 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 = (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

// 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

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

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