Uso de flujo de ReactJS

在本章中，我们将学习如何在React应用程序中实现通量模式。我们将使用Redux框架。本章的目标是展示连接Redux和React所需的每个部分的最简单示例。

Número1Paso-安装Redux

我们将通过command prompt窗口安装Redux。

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

Número2Paso-创建文件和文件夹

在这一步中，我们将创建文件夹和文件对于我们acciones，reductores和components．完成後,这就是文件夹结构的样子。

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

步骤3- acciones

acciones son objetos JavaScript, que utilizantypepropiedad para notificar los datos que deben enviarse a la tienda. Estamos definiendoADD_TODOSe usará para agregar nuevos elementos a la lista. LaaddTodoLa función es un creador de acciones que devuelve nuestras acciones yidEstablecer un para cada proyecto creado.

acciones / actions.js

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

步骤4-Reducers

Aunque las operaciones solo desencadenarán cambios en la aplicación, los reducers especificarán estos cambios. Estamos usando la declaración switch para buscar la operación ADD_TODO. Los reducers son funciones que necesitan dos parámetros (state y action) para calcular y devolver el estado actualizado.

La primera función se usará para crear un nuevo elemento, mientras que la segunda función lo enviará a la lista. Finalmente, usaremos la función asistente combineReducers, donde podemos agregar cualquier nuevo reducer que pueda usar en el futuro.

reductores / reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../acciones/acciones
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

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

Número6Paso-Componente raíz

El componente App es el componente raíz de la aplicación. Solo el componente raíz debe saber sobre redux. Una parte importante a tener en cuenta es la función connect que se utiliza para conectar el componente raíz App con la tienda.

Esta función toma como parámetro la función select. La función select obtiene el estado desde el almacenamiento y devuelve las propiedades (visibleTodos) que podemos usar en el componente.

App.jsx

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

步骤7-其他组件

Estos componentes no deben saber de 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>
　　　　　　)
　　　}
}

Al iniciar la aplicación, podremos agregar proyectos a la lista.