Uso do Fluxo do ReactJS

Tutorial Básico do ReactJS

Número1Passo-Neste capítulo, vamos aprender a implementar o padrão fluxo em aplicações React. Vamos usar o framework Redux. O objetivo deste capítulo é mostrar o exemplo mais simples de cada parte necessária para conectar Redux e React.

vamos instalar Reduxcommand promptinstalação da janela Redux .

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

Número2Passo-criar arquivos e pastas

Nesta etapa, criaremos pastas e arquivos paraações,reduztoresecomponentsConcluído, esta é a estrutura da pasta.

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

Passos3- ações

ações são objetos JavaScript, que usamtypepropriedade é usada para notificar os dados que devem ser enviados para a loja. Estamos definindoADD_TODOSerá usada para adicionar novos itens à lista. AaddTodoA função é um criador de ações, que retorna nossas ações eidPara cada item criado, configure um.

ações / actions.js

export const ADD_TODO = 'ADD_TODO'
let nextTodoId = 0;
export function addTodo(text) {
　　　return {
　　　　　　type: ADD_TODO,
　　　　　　id: nextTodoId++,
　　　　　　text
　　　};
}

Passos4-Reducers

Embora as operações causem apenas mudanças na aplicação, os reducers especificam essas mudanças. Estamos usando a estrutura switch para procurar a operação ADD_TODO. Um reducer é uma função que precisa de dois parâmetros (state e action) para calcular e retornar o estado atualizado.

A primeira função será usada para criar um novo item, enquanto a segunda função adicionará esse item à lista. Finalmente, usaremos a função assistente combineReducers, onde podemos adicionar qualquer novo reducer que possamos usar no futuro.

reduztores / reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../ações/ações
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

Passos5-Store

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 '.'/reduztores/reduztores
let store = createStore(todoApp)
let rootElement = document.getElementById('app')
render(
　　　<Provider store={store}>
　　　　　　<App　/>
　　　</Provider>,
　　　rootElement
)

Número6Passo-Componente raiz

O componente App é o componente raiz da aplicação. Apenas o componente raiz deve saber sobre o redux. A parte importante a notar é a função connect usada para conectar o componente raiz App ao store.

Esta função recebe como parâmetro a função select. A função select obtém o estado do armazenamento e retorna os props (visibleTodos) que podemos usar no componente.

App.jsx

import React, { Component } from 'react'
import { connect } from 'react'-redux
import { addTodo } from '.'/ações/ações
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);

Passos7-Outros componentes

Estes componentes não devem saber do redux.

components/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 = ''
　　　}
}

components/Todo.js

import React, { Component, PropTypes } from 'react'
export default class Todo extends Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<li>
　　　　　　　　　　　　{this.props.text}
　　　　　　　　　</li>
　　　　　　)
　　　}
}

components/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>
　　　　　　)
　　　}
}

Ao iniciar o aplicativo, seremos capazes de adicionar projetos à lista.