Skip to content

Instantly share code, notes, and snippets.

@Leandroswq
Forked from GabrielFMPinheiro/React-Redux.md
Last active January 27, 2023 23:36
Show Gist options
  • Save Leandroswq/c3cce4c35a2b7dc1bf3df6b2fda48445 to your computer and use it in GitHub Desktop.
Save Leandroswq/c3cce4c35a2b7dc1bf3df6b2fda48445 to your computer and use it in GitHub Desktop.

Passo a passo React Redux

Instalação

  • npx create-react-app my-app-redux;
  • cd my-app-redux
  • npm install redux react-redux;
  • npm install react-router-dom@v5 (caso utilizar rotas)
  • npm install redux-thunk (caso utilizar operações assíncronas no redux)
  • npm install --save redux-devtools-extension (caso utilizar operações assíncronas no redux)

Organização

Criar dentro do diretório src:

  • diretório actions;
  • diretório reducers;
  • diretório store;
  • criar os arquivos para cada diretório segundo funcionalidade e arquivo index.js (store obrigatório);
  • diretório components;
  • diretório pages(opcional)

Implementação

  • Inserir o provider(normalmente no componente index.js)
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store} >
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
  • Inserir o BrowserRouter (caso utilizar rotas)
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store} >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
  • Inserir o switch e as routes
import { Switch, Route } from 'react-router-dom';

<Switch>
 <Route exact path="/" component={Home} />
 <Route path="/login" component={Login} />
 <Route path="/explore" component={Explore} />
</Switch>),
  • Importar rootReducer do caminho ./reducers/index.js e criar store no caminho ./store/index.js
import { createStore, combineReducers } from 'redux';
import carReducer from './carReducer';
import trafficReducer from './trafficReducer';

const rootReducer = combineReducers({
  carReducer,
  trafficReducer});

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Caso haver operações assíncronas, realizar a criação do state da seguinte forma:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import carReducer from './carReducer';
import trafficReducer from './trafficReducer';

const rootReducer = combineReducers({
  carReducer,
  trafficReducer});

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
  • Criar os reducers e o rootReducer(caso necessário, lembrando que é uma boa prática usar o combineReducers)
const Initial_State = [];

function registerReducer(state = Initial_State, action) {
  switch (action.type) {
    case 'ADD_REGISTER':
      return [...state, action.data];
    case 'DELETE_REGISTER':
      return state.filter(register => register !== action.value);
    default:
      return state;
  }
}

export default registerReducer;
  • Criar as actions segundo casa funcionalidade da aplicação
export const addRegister = value => ({ type: 'ADD_REGISTER', data: value });
export const deleteRegister = value => ({ type: 'DELETE_REGISTER', value });
export const login = value => ({ type: 'LOGIN', value });

Segue abaixo uma action assíncrona:

const requestMovies = () => ({
  type: REQUEST_MOVIES});

const receiveMovies = (movies) => ({
  type: RECEIVE_MOVIES,
  movies});

export function fetchMovies() {
  return (dispatch) => { // thunk declarado
    dispatch(requestMovies());
    return fetch('alguma-api-qualquer.com')
      .then((response) => response.json())
      .then((movies) => dispatch(receiveMovies(movies)));
  };
}

Utilização

Caso haja a necessidade da utilização do redux nos components ou pages, utilize:

  • a função mapStateToProps: receber informações do state do redux;
const mapStateToProps = state => ({
  registers: state.NOME_DO_REDUCER(caso utilizou o combineReducers).PROPRIEDADE(caso necessário),
  userLogin: state.loginReducer});
  • a função mapDispatchToProps
const mapDispatchToProps = dispatch => ({
  delete: (parâmetro exigido pela action) => dispatch(ACTION(parâmetro exigido pela action))});
  • connect: permite a conexão junto ao state. Caso utilize alguma das funções acima, seu uso é obrigatório
import { connect } from 'react-redux';

export default connect(mapStateToProps, mapDispatchToProps)(COMPONENT);

Você também pode optar por usar o redux com os hooks useSelector e useDispatch. Eles devem ser utilizados dentro de um componente funcional, por esse motivo não é nescessario o uso do connect

  • o hook useSelector: retorna informações do state do redux;
const registers = useSelector((state) => state.NOME_DO_REDUCER(caso utilizou o combineReducers).PROPRIEDADE(caso necessário))
const userLogin = useSelector((state) => state.loginReducer)
  • o hook useDispatch: retorna a função dispatch
const dispatch = useDispatch()
dispatch(ACTION(parâmetro exigido pela action))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment