Использование flux ReactJS

В этой главе мы будем изучать, как реализовать паттерн flux в приложении React. Мы будем использовать фреймворк Redux. Цель этой главы - показать самый простой пример каждого компонента, необходимого для подключения Redux и React.

Шаг 1 - установка Redux

Мы будем использоватьcommand promptв окне установки Redux .

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

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

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

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 - это объект JavaScript, который используетtypeатрибут для уведомления данных, которые должны быть отправлены в магазин. Мы определяемADD_TODOоперация, которая будет использоваться для добавления нового элемента в список. ЭтотaddTodoФункция является создателем действия, который возвращает наше действие иidУстановите для каждого созданного элемента.

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

Хотя операции могут вызывать изменения только в приложении, reducer определяет эти изменения. Мы используем оператор switch для поиска операции ADD_TODO. Reducer является функцией, которая требует двух параметров (state и action) для вычисления и возврата обновленного состояния.

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

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
)

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

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

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

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

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