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:
// SEM O THUNK
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;// COM O THUNK
import { legacy_createStore as createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
const middleware = applyMiddleware(thunk);
const store = createStore(rootReducer, composeWithDevTools(middleware));
export default store;Criar dentro do arquivo redux/reducers/index.js:
- estado inicial
- criar função reducer com
switchretornando apenas a opçãodefault - criar
rootReducerusando ocombineReducers - 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('[email protected]'));
}
Esse checklist é famoso nos meus projetos!