ReactJS - Utilizzo di Flux

In questo capitolo impareremo come implementare il pattern di flusso nelle applicazioni React. Noi useremoReduxstruttura. L'obiettivo di questo capitolo è presentare l'esempio più semplice di ogni elemento necessario per il collegamentoRedux e React.

Passaggio 1: installa Redux

Installeremo Redux tramite command prompt finestra.

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

Passaggio 2: creare file e cartelle

In questo passaggio creeremo cartelle e file per il nostro actions, reducers, e components. Dopo aver finito, ecco come apparirà la struttura delle cartelle.

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

Passaggio 3: azioni

Le azioni sono oggetti JavaScript che utilizzano typeproprietà per informare sui dati che dovrebbero essere inviati al negozio. Stiamo definendoADD_TODOazione che verrà utilizzata per aggiungere un nuovo elemento alla nostra lista. IladdTodo funzione è un creatore di azioni che restituisce la nostra azione e imposta un file id per ogni articolo creato.

azioni / azioni.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

Passaggio 4: riduttori

Sebbene le azioni attivino solo modifiche nell'app, il file reducersspecificare tali modifiche. Stiamo usandoswitch dichiarazione per cercare un file ADD_TODOazione. Il riduttore è una funzione che accetta due parametri (state e action) per calcolare e restituire uno stato aggiornato.

La prima funzione verrà utilizzata per creare un nuovo elemento, mentre la seconda inserirà quell'elemento nell'elenco. Verso la fine, stiamo usandocombineReducers funzione di supporto in cui possiamo aggiungere nuovi riduttori che potremmo utilizzare in futuro.

riduttori / riduttori.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

Passaggio 5: Store

Il negozio è un luogo che detiene lo stato dell'app. È molto facile creare un negozio una volta che hai i riduttori. Stiamo passando la proprietà del negozio aprovider elemento, che avvolge il nostro componente di percorso.

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
)

Passaggio 6: componente radice

Il Appcomponent è il componente radice dell'app. Solo il componente root dovrebbe essere a conoscenza di un redux. La parte importante da notare è il fileconnect funzione che viene utilizzata per connettere il nostro componente root App al store.

Questa funzione richiede selectfunziona come argomento. La funzione Select prende lo stato dal negozio e restituisce gli oggetti di scena (visibleTodos) che possiamo utilizzare nei nostri componenti.

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

Passaggio 7 - Altri componenti

Questi componenti non dovrebbero essere consapevoli del redux.

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

componenti / Todo.js

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

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

componenti / 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 avvieremo l'app, saremo in grado di aggiungere elementi alla nostra lista.