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 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.ts
- diretório
actions
- diretório
reducers
Criar dentro do diretório actions
:
- arquivo
index.ts
.
Criar dentro do diretório reducers
:
- arquivo
index.ts
.
Criar dentro do arquivo redux/store.ts
:
- 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.ts
:
- estado inicial
- criar função reducer com
switch
retornando apenas a opçãodefault
- criar
rootReducer
usando 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 main.tsx
:
- 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.ts
:
- 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,
payload: email,
})
Nos reducers:
- criar os casos para cada action criada, retornando o devido estado atualizado
Nos componentes que irão ler o estado:
- usar o Hook
useSelector
- Para utilizá-lo, é necessário realizar a importação da biblioteca
react-redux
import { useSelector } from 'react-redux';
type RootState = {
email: string;
};
// function App() {
const rootState = useSelector((state: RootState) => state);
// return (
// <div>
// <h1>Dados</h1>
<h2>{ rootState.email }</h2>
// </div>
// );
// }
// export default App;
Nos componentes que irão modificar o estado:
- Importar a action creator a ser utilizada
- Usar o dispatch por meio do Hook
useDispatch
- Para utilizá-lo, é necessário realizar a importação da biblioteca
react-redux
import { useDispatch, useSelector } from 'react-redux';
import { actionCreator } from './redux/actions';
// type RootState = {
// email: string;
// };
// function App() {
// const rootState = useSelector((state: RootState) => state);
const dispatch = useDispatch();
// return (
// <div>
// <h1>Dados</h1>
// <h2>{ rootState.email }</h2>
<button onClick={ () => dispatch(actionCreator()) }>Cadastrar</button>
// </div>
// );
// }
// export default App;