React JS — использование Flux

Дата публикации: 2018-07-25

От автора: в этой главе мы познакомимся с тем, как реализовать в приложениях шаблон Flux React. Мы будем использовать среду Redux. Цель этой главы — представить простейший пример каждой части, необходимой для подключения Redux и React.

Шаг 1 — Установите Redux

Мы установим Redux через окно командной строки.

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

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

Шаг 2. Создание файлов и папок

На этом этапе мы создадим папки и файлы для действий, редукторов и компонентов. После того, как мы закончим, структура папок будет выглядеть так.

Шаг 3 — Действия

Действия — это объекты JavaScript, которые используют свойство type для информирования о данных, которые должны быть отправлены в хранилище. Мы определяем действие ADD_TODO, которое будет использоваться для добавления нового элемента в список. Функция addTodo — это создатель действия, который возвращает наше действие и устанавливает идентификатор для каждого созданного элемента.

actions/actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {

return {

type: ADD_TODO,

id: nextTodoId++,

text

};

}

Шаг 4 — Редукторы

В то время, как действия только инициируют изменения в приложении, редукторы определяют эти изменения. Мы используем оператор switch для поиска действия ADD_TODO. Редуктор — это функция, которая принимает два параметра (состояние и действие) для расчета и возврата обновленного состояния.

Первая функция будет использоваться для создания нового элемента, а вторая — для ввода этого элемента в список. В конце мы используем вспомогательную функцию combReducers, в которой мы можем добавлять любые новые редукторы, которые мы могли бы использовать в будущем.

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

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 — Хранилище

Хранилище — это место, в котором размещается состояние приложения. Если у вас есть редукторы, вы можете очень легко создать хранилище. Мы передаем свойство хранилища элементу провайдера, который обертывает компонент маршрута.

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
)

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(

<App />

</Provider>,

rootElement

)

Шаг 6 — Корневой компонент

Компонент App является корневым компонентом приложения. Только корневой компонент должен знать о redux. Важно отметить, что для подключения нашего корневого компонента App к хранилищу используется функция connect.

Эта функция принимает функцию select в качестве аргумента. Функция select принимает состояние из хранилища и возвращает свойства (visibleTodos), которые мы можем использовать в компонентах.

App.js

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

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>

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

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

export default class AddTodo extends Component {

render() {

return (

<div>

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

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

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>

)

}

Когда мы запустим приложение, мы сможем добавлять элементы в список.

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки: react

React JS — использование Flux

Шаг 1 — Установите Redux

Шаг 2. Создание файлов и папок

Шаг 3 — Действия

Шаг 4 — Редукторы

Шаг 5 — Хранилище

Шаг 6 — Корневой компонент

Шаг 7 — Другие компоненты

Похожие статьи:

Комментарии Вконтакте:

Материалы

Мы в соц. сетях

Связь

Информация