explanation_redux

index.js

import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reducer-estudos.js

const INITIAL_STATE = {
  nome: 'Tryber',
  preparadoParaOProjeto: false,
  status: '',
};

function estudosReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
  case SURTANDO_COM_REDUX:
    return { ...state, help: action.payload }; // payload = SOCORRO
  case ACOSTUMANDO_COM_A_DODEIRA:
    return { ...state, status: action.payload };
  case BORA_PARA_O_PROJETO:
    return { ...state, preparadoParaOProjeto: true, status: '#VQV🚀' };
  default:
    return state;
  }
}

export default estudosReducer;

/* 

Os reducers são responsáveis pela alteração de estado mas lembre, os estados são IMUTÁVEIS
ou seja sempre é retornado um novo estado ao invés de modificar-los.
Isso além de ser uma boa prática para questões de performance,
permite a linha de tempo através da extensão ser visualizada.

No final de tudo reducers são funções puras,
você trata a melhor forma como você quer responder as ações solicitadas
Receber parametro, mandar algo fixo, etc.

*/

reducer-index.js

import { combineReducers } from 'redux';

import estudos from './estudos';
import materias from './materias';

const rootReducer = combineReducers({
  estudos,
  materias,
});

export default rootReducer;

/*

Conforma sua aplicação cresce iremos ter a necessidade
de ter vários reducers para tratar e manipular somente certa parte da store
para uma melhor performance e suas responsabilidades definidas conforme esperamos.
imagina ter que percorrer sempre o objeto para achar uma ação específica 😱

Detalhe: Esse declaração dentro da função é o nome da chave para você conseguir acessar o estado na store.

*/

store.js

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

import reducer from '../reducers';

export const store = createStore(
  reducer,
  composeWithDevTools(),
);

export default store;

/*
A store tem a responsabilidade de guardar todos os estados da aplicação
e possibilita o compartilhamento dele para todos os componentes filhos.

Não é nada complexo ou um bixo de sete cabeças!
Pense nele simplesmente como um grande objeto Javascript onde irá estar listada
todos os estados que você deseja compartilhar entre componentes.

*/