guiaReactRedux.md

Checklist do react-redux

Instalação

• npm i redux react-redux
• npm i redux-devtools-extension
• npm i react-router-dom@v5

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.

Antes de começar

• pensar como será o formato do seu estado global
• pensar quais actions serão necessárias na sua aplicação

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;

Instalação se for usar assincronicidade

• npm install redux-thunk

// arquivo onde a redux store é criada
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

...

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));
...

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

import propTypes from 'prop-types';
import { connect } from 'react-redux';

ComponentName.propTypes = {
  PropName: propTypes.func.isRequired,
};

const mapStateToProps = (state) => ({
  myState: state.myReducer.state,
});

export default connect(mapStateToProps, null)(myComponent);

Nos componentes que irão modificar o estado:

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

import propTypes from 'prop-types';
import { connect } from 'react-redux';

ComponentName.propTypes = {
  PropName: propTypes.func.isRequired,
};

const mapDispatchToProps = (dispatch) => ({
  myDispatch: (state) => dispatch(newAction(state)),
});

export default connect(null, mapDispatchToProps)(SecondComponent);