ReactJSFlussverwendung

In diesem Kapitel werden wir lernen, wie man das Flux-Modell in einer React-Anwendung implementiert. Wir werden das Redux-Framework verwenden. Ziel dieses Kapitels ist es, die einfachsten Beispiele für jede Komponente zu zeigen, die für die Verbindung von Redux und React erforderlich ist.

Abschnitt1Schritt-Redux installieren

Wir werdenKommandozeileFenster installieren Redux .

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

Abschnitt2Schritt-Dateien und Verzeichnisse erstellen

In diesem Schritt werden wir Verzeichnisse und Dateien für unsactions,reducersundcomponentsFertig, so sieht die Verzeichnisstruktur aus.

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 sind JavaScript-Objekte, die dietypeEigenschaft benachrichtigt, dass Daten an den Store gesendet werden sollen. Wir definierenADD_TODOwird verwendet, um ein neues Element in die Liste hinzuzufügen. DieaddTodoDie Funktion ist ein Action- Creator, der unsere Aktion zurückgibt undidFür jedes erstellte Projekt eine zu setzen.

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

Obwohl die Operation nur Änderungen im Anwendungszustand auslöst, spezifiziert der Reducer diese Änderungen. Wir verwenden den Switch-Befehl, um die ADD_TODO-Operation zu suchen. Ein Reducer ist eine Funktion, die zwei Parameter (Zustand und Action) benötigt, um den aktualisierten Zustand zu berechnen und zurückzugeben.

Die erste Funktion wird verwendet, um ein neues Element zu erstellen, und die zweite Funktion schiebt dieses Element in die Liste. Schließlich verwenden wir den Helper-Funktion combineReducers, wo wir alle möglichen zukünftigen Reducer hinzufügen können.

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
)

Abschnitt6Schritt-Wurzelkomponente

Das App-Component ist die Wurzelkomponente der Anwendung. Nur die Wurzelkomponente sollte Redux kennen. Ein wichtiger Punkt zu beachten ist die connect-Funktion, die das Root-Component App mit dem Store verbindet.

Diese Funktion nimmt die select-Funktion als Parameter. Die Select-Funktion holt den Zustand aus dem Speicher und gibt die Props (visibleTodos) zurück, die wir im Komponenten verwenden können.

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-其他组件

Diese Komponenten sollten nicht Redux kennen.

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

Wenn wir die Anwendung starten, können wir Projekte zur Liste hinzufügen.