Как создать приложение Todo, используя React, Redux и Immutable.js

Разработка редуктора

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

Вот начальная структура нашего редуктора:

 // src/reducer.js import { List, Map } from 'immutable'; const init = List([]); export default function(todos=init, action) { switch(action.type) { case 'ADD_TODO': // … case 'TOGGLE_TODO': // … default: return todos; } } 

Обработка действия ADD_TODO довольно проста, так как мы можем использовать метод .push () , который вернет новый список с приложением todo в конце:

 case 'ADD_TODO': return todos.push(Map(action.payload)); 

Обратите внимание, что мы также преобразуем объект todo в неизменяемую карту, прежде чем он будет помещен в список.

Более сложное действие, которое нам нужно выполнить, это TOGGLE_TODO :

 case 'TOGGLE_TODO': return todos.map(t => { if(t.get('id') === action.payload) { return t.update('isDone', isDone => !isDone); } else { return t; } }); 

Мы используем .map (), чтобы перебрать список и найти задачу, id которой соответствует действию. Затем мы вызываем .update () , который принимает ключ и функцию, затем возвращает новую копию карты, где значение ключа заменяется результатом передачи начального значения в функцию обновления.

Это может помочь увидеть буквальную версию:

 const todo = Map({ id: 0, text: 'foo', isDone: false }); todo.update('isDone', isDone => !isDone); // => { id: 0, text: 'foo', isDone: true } 

Соединяя все

Теперь у нас есть готовые действия и редуктор, мы можем создать магазин и подключить его к нашим компонентам React:

 // src/app.js import React from 'react'; import { render } from 'react-dom'; import { createStore } from 'redux'; import { TodoList } from './components'; import reducer from './reducer'; const store = createStore(reducer); render( <TodoList todos={store.getState()} />, document.getElementById('app') ); 

Нам нужно, чтобы наши компоненты знали об этом магазине. Мы будем использовать response-redux, чтобы упростить этот процесс. Это позволяет нам создавать контейнеры с поддержкой магазина, которые обертывают наши компоненты, так что нам не нужно менять наши первоначальные реализации.

Нам понадобится контейнер вокруг нашего компонента <TodoList /> . Давайте посмотрим, как это выглядит:

 // src/containers.js import { connect } from 'react-redux'; import * as components from './components'; import { addTodo, toggleTodo } from './actions'; export const TodoList = connect( function mapStateToProps(state) { // … }, function mapDispatchToProps(dispatch) { // … } )(components.TodoList); 

Мы создаем контейнеры с функцией подключения . Когда мы вызываем connect() , мы передаем две функции, mapStateToProps() и mapDispatchToProps() .

Функция mapStateToProps принимает текущее состояние магазина в качестве аргумента (в нашем случае — список задач), а затем ожидает, что возвращаемое значение будет объектом, который описывает отображение из этого состояния в подпорки для нашего упакованного компонента:

 function mapStateToProps(state) { return { todos: state }; } 

Это может помочь визуализировать это на экземпляре обернутого компонента React:

 <TodoList todos={state} /> 

Нам также нужно будет предоставить функцию mapDispatchToProps , которая передается методу dispatch магазина, чтобы мы могли использовать ее для отправки действий нашим создателям действий:

 function mapDispatchToProps(dispatch) { return { addTodo: text => dispatch(addTodo(text)), toggleTodo: id => dispatch(toggleTodo(id)) }; } 

Снова, это могло бы помочь визуализировать все эти реквизиты вместе на экземпляре нашего обернутого компонента React:

 <TodoList todos={state} addTodo={text => dispatch(addTodo(text))} toggleTodo={id => dispatch(toggleTodo(id))} /> 

Теперь, когда мы сопоставили наш компонент с создателями действий, мы можем вызвать их из прослушивателей событий:

 export function TodoList(props) { const { todos, toggleTodo, addTodo } = props; const onSubmit = (event) => { const input = event.target; const text = input.value; const isEnterKey = (event.which == 13); const isLongEnough = text.length > 0; if(isEnterKey && isLongEnough) { input.value = ''; addTodo(text); } }; const toggleClick = id => event => toggleTodo(id); return ( <div className='todo'> <input type='text' className='todo__entry' placeholder='Add todo' onKeyDown={onSubmit} /> <ul className='todo__list'> {todos.map(t => ( <li key={t.get('id')} className='todo__item' onClick={toggleClick(t.get('id'))}> <Todo todo={t.toJS()} /> </li> ))} </ul> </div> ); } 

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

Наконец, нам нужно сообщить контейнерам о хранилище, используя компонент <Provider /> :

 // src/app.js import React from 'react'; import { render } from 'react-dom'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import reducer from './reducer'; import { TodoList } from './containers'; // ^^^^^^^^^^ const store = createStore(reducer); render( <Provider store={store}> <TodoList /> </Provider>, document.getElementById('app') ); 

Вывод

Нельзя отрицать, что экосистема вокруг React и Redux может быть довольно сложной и пугающей для новичков, но хорошая новость заключается в том, что почти все эти концепции могут быть перенесены. Мы едва коснулись поверхности архитектуры Redux, но уже увидели достаточно, чтобы помочь нам начать изучение архитектуры Elm или подобрать библиотеку ClojureScript, такую ​​как Om или Re-frame . Точно так же мы видели лишь небольшую часть возможностей с неизменяемыми данными, но теперь мы лучше подготовлены к тому, чтобы начать изучать такие языки, как Clojure или Haskell .

Независимо от того, исследуете ли вы состояние разработки веб-приложений или весь день пишете на JavaScript, опыт работы с архитектурами на основе действий и неизменяемыми данными уже становится жизненно важным навыком для разработчиков, и сейчас это прекрасное время для изучения предметы первой необходимости.