#VemProReact #7

#VemProReact

#VemProReact #6

O #Desafio!

#VemProReact

#VemProReact #6

O novo projeto

npx  create-react-app  vem-pro-react-redux

#VemProReact

#VemProReact #6

O que são Template Strings?

#VemProReact

Template Strings

É uma string "turbinada"
Permite interpolar variáveis
Permite concatenar valores
Permite quebrar a string em várias linhas

Exemplos:

`Olá,
Tudo bem?`

`Olá, ${name}!`

`Olá, eu sou o ${first_name}${last_name}!`

#VemProReact

Redux

O que é Redux?

#VemProReact

Redux

É uma implementação do FLUX
Permite centralizar as informações da aplicação
É um grande state que pode ser compartilhado entre vários componentes
Permite escalar as aplicações sem ter que repassar várias propriedades entre os componentes

#VemProReact

Redux

Como adicionar o Redux nos projetos?

#VemProReact

Redux

Instalamos o pacote redux e react-redux:

yarn add redux react-redux

Criamos uma pasta actions contendo um index.js:

Criamos uma pasta reducers contendo um index.js:

#VemProReact

Actions

Como criar minhas Actions?

#VemProReact

Actions

Considerando que uma action deve ser uma function que retorna um object:

const set_nome = (nome) => ({})

Adicionamos uma prop type ao objeto e os parâmetros recebidos (não são obrigatórios e variam para cada action):

const set_nome = (nome) => ({
    type: 'SET_NOME',
    nome: nome
})

Exportamos a function para ser usada em outros arquivos:

export const set_nome = (nome) => ({
    type: 'SET_NOME',
    nome: nome
})

#VemProReact

Reducers

Como criar meus Reducers?

#VemProReact

Reducers

Definimos um state inicial:

const initialState = {
  nome: ''
}

Adicionamos uma function que recebe o state e action:

const pessoa = (state = initialState, action) => {}

Adicionamos um switch para tratar os types das actions:

const pessoa = (state = initialState, action) => {
    switch (action.type) {
    
    }
}

#VemProReact

Reducers

Cada type deve fazer as manipulações no state e retornar um novo object:

const pessoa = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NOME':
      return {
        ...state,
        nome: action.nome
      }
    default:
      return state
  }
}

Exportamos a function para ser usada em outros arquivos:

export default pessoa

#VemProReact

Actions / Reducers

Como fazer tudo isto funcionar?

#VemProReact

Actions / Reducers

Considerando o index.js (onde chamamos o <App />)...

import { createStore } from 'redux'

Importamos o createStore do redux:

Importamos o Provider do react-redux:

import { Provider } from 'react-redux'

Importamos o reducer do nosso projeto:

import reducer from './reducers'

#VemProReact

Actions / Reducers

Considerando o index.js (onde chamamos o <App />)...

Criamos uma variável store que recebe o createStore e o reducer?

const store = createStore(reducer)

Adicionamos o Provider ao render, recebendo o store e o App:

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

#VemProReact

Actions

actions/index.js

export const set_pessoa = (nome) => ({
  type: 'SET_NOME',
  nome
})

#VemProReact

Reducers

reducers/index.js

const initialState = {
  nome: ''
}

const pessoa = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NOME':
      return {
        ...state,
        nome: action.nome
      }
    default:
      return state
  }
}

export default pessoa

#VemProReact

Actions / Reducers

index.js

import React from 'react'
import { render } from 'react-dom'

// Redux
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import reducer from './reducers'

// Components
import App from './components/App'

const store = createStore(reducer)

render(
  <Provider store{store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

#VemProReact

Dúvidas?

#VemProReact

VPRTB

O que é VPRTB?

#VemProReact

Dever de casa!

Alterar o nome do projeto criado para vem-pro-react-task-board

Instalar e configurar o redux no projeto
Criar um reducer chamado board, contendo um array com o nome tasks em seu store (board)
Criar uma action chamada add_task, que recebe um parâmetro task

#VemProReact

Obrigado!

#VemProReact #7

#VemProReact #7

More from Softplan Planejamento e Sistemas