使用通量ReactJS

In questa sezione, impareremo come implementare il pattern Flux in un'applicazione React. Utilizzeremo il framework Redux. L'obiettivo di questa sezione è mostrare i semplici esempi di ciascuna parte necessaria per connettere Redux e React.

Passo 1- installazione di Redux

Stiamo per installare Redux tramiteprompt dei comandiInstallazione di Redux nella finestra.

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

Passo 2- creazione di file e cartelle

In questo passo, creeremo le cartelle e i file necessari perazioni,reducersecomponentsDopo aver completato, ecco come appare la struttura delle cartelle.

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

Passo 3- azioni

azioni è un oggetto JavaScript, che utilizzatypenotifica i dati che devono essere inviati al negozio. Stiamo definendoADD_TODOoperazione utilizzata per aggiungere nuovi elementi alla lista. L'attributoaddTodoUna funzione è un creatore di azioni, che restituisce le nostre azioni eidImpostare un identificatore per ogni progetto creato.

actions / actions.js

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

Passo 4 - Reducers

Sebbene l'operazione generi solo modifiche nell'applicazione, il reducer specifica queste modifiche. Stiamo cercando l'operazione ADD_TODO utilizzando una frase switch. Il reducer è una funzione che necessita di due parametri (state e action) per calcolare e restituire lo stato aggiornato.

La prima funzione viene utilizzata per creare una nuova voce, mentre la seconda funzione aggiunge questa voce alla lista. Infine, useremo l'assistente funzione combineReducers, dove possiamo aggiungere qualsiasi nuovo reducer che potremmo utilizzare in 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

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

Passo 6 - Componente radice

Il componente App è il componente radice dell'applicazione. Solo il componente radice dovrebbe sapere di redux. Un'importante parte da notare è la funzione connect utilizzata per connettere il componente radice App allo store.

Questa funzione accetta come parametro la funzione select. La funzione select recupera lo stato dallo store e restituisce le proprietà che possiamo utilizzare nel componente (visibleTodos).

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);

Passo 7 - Altri componenti

Questi componenti non dovrebbero sapere di 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)}>
　　　　　　　　　　　　　　　Aggiungi
　　　　　　　　　　　　</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>
　　　　　　)
　　　}
}

当启动应用程序时，我们将能够将项目添加到列表中。