ReactJS - Usando Flux

Neste capítulo, aprenderemos como implementar o padrão de fluxo em aplicações React. Nós vamos usarReduxestrutura. O objetivo deste capítulo é apresentar o exemplo mais simples de cada peça necessária para conectarRedux e React.

Etapa 1 - Instalar Redux

Vamos instalar o Redux através do command prompt janela.

C:\Users\username\Desktop\reactApp>npm install --save react-redux

Etapa 2 - Criar arquivos e pastas

Nesta etapa, criaremos pastas e arquivos para nosso actions, reducers, e components. Depois que terminarmos com isso, é assim que a estrutura de pastas ficará.

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js

Etapa 3 - Ações

Ações são objetos JavaScript que usam typepropriedade para informar sobre os dados que devem ser enviados para a loja. Estamos definindoADD_TODOação que será usada para adicionar um novo item à nossa lista. oaddTodo função é um criador de ação que retorna nossa ação e define um id para cada item criado.

actions / actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

Etapa 4 - Redutores

Embora as ações apenas acionem mudanças no aplicativo, o reducersespecificar essas mudanças. Nós estamos usandoswitch declaração para procurar um ADD_TODOaçao. O redutor é uma função que leva dois parâmetros (state e action) para calcular e retornar um estado atualizado.

A primeira função será usada para criar um novo item, enquanto a segunda irá empurrar esse item para a lista. No final, estamos usandocombineReducers função auxiliar onde podemos adicionar quaisquer novos redutores que possamos usar no futuro.

reducers / reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
      default:
         return state
   }
}
function todos(state = [], action) {
   switch (action.type) {
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
      default:
         return state
   }
}
const todoApp = combineReducers({
   todos
})
export default todoApp

Etapa 5 - Armazenar

A loja é um local que mantém o estado do aplicativo. É muito fácil criar uma loja depois de ter redutores. Estamos passando a propriedade da loja para oprovider elemento, que envolve nosso componente de rota.

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './App.jsx'
import todoApp from './reducers/reducers'

let store = createStore(todoApp)
let rootElement = document.getElementById('app')

render(
   <Provider store = {store}>
      <App />
   </Provider>,
	
   rootElement
)

Etapa 6 - Componente Raiz

o Appcomponente é o componente raiz do aplicativo. Apenas o componente raiz deve estar ciente de um redux. A parte importante a notar é oconnect função que é usada para conectar nosso componente raiz App ao store.

Esta função leva selectfuncionar como um argumento. A função de seleção pega o estado da loja e retorna os adereços (visibleTodos) que podemos usar em nossos componentes.

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props
      
      return (
         <div>
            <AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

Etapa 7 - Outros componentes

Esses componentes não devem estar cientes do redux.

componentes / AddTodo.js

import React, { Component, PropTypes } from 'react'

export default class AddTodo extends Component {
   render() {
      return (
         <div>
            <input type = 'text' ref = 'input' />
				
            <button onClick = {(e) => this.handleClick(e)}>
               Add
            </button>
         </div>
      )
   }
   handleClick(e) {
      const node = this.refs.input
      const text = node.value.trim()
      this.props.onAddClick(text)
      node.value = ''
   }
}

componentes / Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

componentes / TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo =>
               <Todo
                  key = {todo.id}
                  {...todo}
               />
            )}
         </ul>
      )
   }
}

Quando iniciarmos o aplicativo, seremos capazes de adicionar itens à nossa lista.