Skip to content

Instantly share code, notes, and snippets.

@bferronato

bferronato/exemplo-pratico-de-redux.markdown

Forked from mikansc/exemplo-pratico-de-redux.markdown
Created January 19, 2021 03:11
Show Gist options
  • Save bferronato/9adfde8b648db89d03245635a1683795 to your computer and use it in GitHub Desktop.
Save bferronato/9adfde8b648db89d03245635a1683795 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mikansc mikansc created this gist Jan 15, 2021.
    7 changes: 7 additions & 0 deletions exemplo-pratico-de-redux.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Exemplo prático de Redux
    ------------------------
    Exemplo prático de Redux basado no exemplo do curso Modern React With Redux, do Stephen Grider.

    A [Pen](https://codepen.io/mikansc/pen/ZEQgVKB) by [Michael Nascimento](https://codepen.io/mikansc) on [CodePen](https://codepen.io).

    [License](https://codepen.io/mikansc/pen/ZEQgVKB/license).
    92 changes: 92 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    console.clear();

    // Action creators -------------------------------------------------//
    // actions.js
    const criarApolice = (nome, preco) => {
    return {
    //Action
    type: 'NOVA_APOLICE',
    payload: {
    nome,
    preco
    }
    }
    };

    const cancelarApolice = (nome) => {
    return {
    //Action
    type: 'CANCELAR_APOLICE',
    payload: {
    nome
    }
    }
    };

    const registrarSinistro = (nome, indenizacao) => {
    return {
    //Action
    type: 'REGISTRAR_SINISTRO',
    payload: {
    nome,
    indenizacao
    }
    }
    };



    // Reducers -------------------------------------------------//
    //--------------------------- initial val ------------------- payload ---//
    const historicoDeSinistros = (historicoDeSinistrosAtual = [], action) => {
    if(action.type === 'REGISTRAR_SINISTRO') {
    return [...historicoDeSinistrosAtual, action.payload];
    }

    return historicoDeSinistrosAtual;
    };

    //---------------- initial val ------ payload --------------------------//
    const financeiro = (saldoAtual = 100, action)=> {
    if(action.type === 'REGISTRAR_SINISTRO') {
    return saldoAtual - action.payload.indenizacao;
    } else if (action.type === 'NOVA_APOLICE') {
    return saldoAtual + action.payload.preco;
    }
    return saldoAtual;
    };

    //--------------- initial val --------- payload -------------------------//
    const apolices = (listaDeApolices = [], action) => {
    if (action.type === 'NOVA_APOLICE') {
    return [...listaDeApolices, action.payload.nome];
    } else if (action.type === 'CANCELAR_APOLICE') {
    return listaDeApolices.filter((nome)=> nome !== action.payload.nome);
    }
    return listaDeApolices;
    };


    // Store (onde fica nosso state) ----------------------------------------//
    const { createStore, combineReducers } = Redux;

    const departamentos = combineReducers({
    financeiro,
    historicoDeSinistros,
    apolices
    });

    const store = createStore(departamentos);


    // // Comandos para testar nossa store e nossas actions ------- //
    console.log('Estado inicial:', store.getState());
    // uncomment the desired action and see the result at console --//
    store.dispatch(criarApolice('Michael', 500));
    // store.dispatch(criarApolice('Emanuelle', 100));
    store.dispatch(criarApolice('Rosane', 100));
    // store.dispatch(registrarSinistro('Michael', 300));
    store.dispatch(cancelarApolice('Rosane'));

    // Olhe o resultado da store -----------//
    console.log('Estado final:', store.getState());
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>