使用通量 ReactJS

Dans ce chapitre, nous allons apprendre à implémenter le pattern flux dans une application React. Nous utiliserons le cadre Redux. L'objectif de ce chapitre est de montrer les exemples les plus simples nécessaires pour connecter Redux et React.

Numéro1Étape-installer Redux

Nous allons installer Redux en utilisantinvite de commandeInstaller Redux via la fenêtre

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

Numéro2Étape-créer des fichiers et des dossiers

À cette étape, nous allons créer des dossiers et des fichiers pouractions,reducersetcomponentsTerminé, voici l'aspect de la structure du dossier.

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- actions

actions sont des objets JavaScript qui utilisenttypepropriété pour notifier les données à envoyer au magasin. Nous définissonsADD_TODOsera utilisé pour ajouter de nouveaux éléments à la liste. L'actionaddTodoLa fonction est un créateur d'action qui retourne nos actions etidPour chaque élément créé, définir un.

actions / actions.js

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

步骤4-Reducers

Bien que les opérations ne déclenchent que des changements dans l'application, les reducers spécifient ces changements. Nous utilisons une instruction switch pour rechercher l'opération ADD_TODO. Un reducer est une fonction qui nécessite deux paramètres (state et action) pour calculer et retourner l'état mis à jour.

La première fonction sera utilisée pour créer un nouvel élément, tandis que la deuxième fonction ajoutera cet élément à la liste. Enfin, nous utiliserons la fonction d'assistant combineReducers, où nous pourrons ajouter tout nouveau reducer que nous pourrions utiliser à l'avenir.

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

步骤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
)

Numéro6Étape-Composant racine

Le composant App est le composant racine de l'application. Seul le composant racine doit connaître Redux. Une partie importante à noter est la fonction connect utilisée pour connecter le composant racine App au magasin.

Cette fonction prend la fonction select en paramètre. La fonction select récupère l'état du stockage et retourne les props (visibleTodos) que nous pouvons utiliser dans le composant.

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

步骤7-其他组件

这些组件不应该知道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>
　　　　　　)
　　　}
}

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