ReactJS - Korzystanie z Flux

W tym rozdziale dowiemy się, jak zaimplementować wzorzec strumienia w aplikacjach React. UżyjemyReduxstruktura. Celem tego rozdziału jest przedstawienie najprostszego przykładu każdego elementu potrzebnego do połączeniaRedux i React.

Krok 1 - Zainstaluj Redux

Zainstalujemy Redux za pośrednictwem command prompt okno.

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

Krok 2 - Utwórz pliki i foldery

W tym kroku utworzymy foldery i pliki dla naszego actions, reducers, i components. Kiedy już to zrobimy, tak będzie wyglądać struktura folderów.

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

Krok 3 - Działania

Akcje to obiekty JavaScript, które używają typewłaściwość informująca o danych, które należy przesłać do sklepu. DefiniujemyADD_TODOakcja, która zostanie wykorzystana do dodania nowej pozycji do naszej listy. PlikaddTodo function to kreator akcji, który zwraca naszą akcję i ustawia id za każdy utworzony przedmiot.

działania / działania.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

Krok 4 - Redukcje

Podczas gdy akcje powodują tylko zmiany w aplikacji, rozszerzenie reducersokreślić te zmiany. Używamyswitch instrukcja, aby wyszukać plik ADD_TODOakcja. Reduktor to funkcja, która przyjmuje dwa parametry (state i action), aby obliczyć i zwrócić zaktualizowany stan.

Pierwsza funkcja posłuży do stworzenia nowej pozycji, a druga wypchnie ją na listę. Pod koniec używamycombineReducers funkcja pomocnicza, w której możemy dodać nowe reduktory, których możemy użyć w przyszłości.

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

Krok 5 - Zapisz

Sklep to miejsce, w którym przechowywany jest stan aplikacji. Utworzenie sklepu jest bardzo łatwe, gdy masz reduktory. Przekazujemy własność sklepu doprovider element, który otacza nasz komponent trasy.

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
)

Krok 6 - Root Component

Plik Appskładnik jest głównym składnikiem aplikacji. Tylko składnik korzeni powinien być świadomy redukcji. Ważną częścią, na którą należy zwrócić uwagę, jest plikconnect funkcja, która jest używana do podłączenia naszego głównego komponentu App do store.

Ta funkcja ma selectfunkcja jako argument. Funkcja Select pobiera stan ze sklepu i zwraca właściwości (visibleTodos), które możemy wykorzystać w naszych komponentach.

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

Krok 7 - Inne komponenty

Te składniki nie powinny być świadome Redux.

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

komponenty / Todo.js

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

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

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

Po uruchomieniu aplikacji będziemy mogli dodawać pozycje do naszej listy.