Redux: Примеры из реального мира (включая CRUD, расширенные шаблоны и т. Д.)

Мне бы хотелось иметь официальный пример CRUD, который обрабатывает:

• Аутентификация
• Нормализация
• Оптимистичные обновления
• Локальное редактирование
• Отношения сущностей
• Пагинация

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

Имеет ли это смысл?

Я также хотел бы увидеть, откуда люди берут данные из API.

@gaearon контент / код будет с открытым исходным кодом, так что это не проблема. Мы бы просто попросили ссылку на нас где-нибудь на странице :) (изменить - использование существующей системы сборки / соглашений также для нас предпочтительнее)

@sebastiandeutsch, не могли бы вы

Некоторое время назад я начал экспериментировать с написанием менеджера паролей, используя monogram и eccrypto . Храните пароли и делитесь ими всеми, даже не отправляя их по сети в незашифрованном виде с помощью ECIES. Так и не дошло до его окончательной доработки, но он вполне мог удовлетворить все пункты в https://github.com/rackt/redux/issues/1353#issuecomment -178760036. Звучит интересно?

@ vkarpov15

Это звучит очень интересно, но, боюсь, это слишком специфично для предметной области. Большинство людей захотят увидеть общий пример CRUD (списки редактируемых элементов, которые могут ссылаться на любой из элементов и т. Д.), И я боюсь, что криптофокус может сделать этот пример менее доступным.

Меня очень интересует локальное / автономное редактирование с оптимистичными обновлениями, у меня есть время, но я не так разбираюсь в приложении redux, у меня есть только сложное собственное приложение, но почти полностью локальное / автономное.
Может быть, мы могли бы написать репо, поработать над ним и постепенно обсудить?
А как насчет «модульных» приложений?
Просто чтобы поделиться некоторыми идеями, я записал несколько идей о том, каким, на мой взгляд, должно быть первое офлайн-приложение, попробуйте его, если у вас есть время, чтобы потратить в нем! :)

https://github.com/jsforum/jsforum/issues/7

Не уверен, насколько широко распространена проблема и каков целевой уровень разработчиков для этого курса, но я хотел бы увидеть где-нибудь в сети, как создавать сложные компоненты приложения, реализованные в react + redux (например, многоступенчатая форма или мастер с состояние контролируется несколькими редукторами), поэтому их можно повторно использовать как единое целое в другом приложении.

@sompylasar Пожалуйста, не стесняйтесь создавать проблему по этому поводу в репозитории React Redux. Я счастлив обсудить здесь подходы к повторному использованию или изоляции компонентов, поддерживающих Redux.

Если вы ищете пример crud для начинающих, всегда есть todo-mvc и армия руководств по «началу работы с babel + redux + response + webpack». Я не уверен, что есть большая ценность для еще одного, я в конечном итоге читаю пару новых сообщений в блогах на эту тему каждую неделю (но, возможно, вы могли бы создать приложение, которое автоматически генерирует эти учебные пособия?: P). Я бы сказал, что учебник более среднего уровня был бы более целесообразным, и изучение IMO криптовалюты могло бы быть заманчивым побочным преимуществом.

Я не ищу пример для начинающих, но в центре внимания должны быть сложные части CRUD (разбиение на страницы, нормализация, оптимистичные обновления, отношения).

Будет ли это использовать пользовательский или существующий API? Или комбинация?

Это сложный вопрос. Я не знаю. Github API может быть хорошей идеей, поскольку он доступен для записи, а концепции знакомы всем. Я знаю, что @ryanflorence работал над чем-то подобным.

Определенно нацелен на разработчиков среднего и продвинутого уровней; уроки для начинающих были насыщенными и редко затрагивали (в реальном мире) более сложные темы, перечисленные Дэном выше.

Я открыт как для пользовательского, так и для существующего API - мы будем рады разместить любые пользовательские API в нашей учетной записи aws. У нас также есть полноценный API для клона Medium.com, который мы создаем для нескольких других курсов, которые мы могли бы использовать, для него также будет доступен исходный код серверной части, если людям будет любопытно. Рад поделиться подробностями, если это звучит интересно.

@EricSimons Мне бы хотелось узнать больше о клоне Medium.

@cshenoy Конечно. Мы создаем полный курс JS, в котором React / Redux будет интерфейсом, а узел - сервером. У нас будет серверный API, размещенный независимо для людей, которые не хотят запускать его локально, поэтому он может хорошо подойти для обучения некоторым из более сложных тем, описанных выше. Набор функций для среднего клона включает следующее:

• Аутентификация (электронная почта / пароль и oAuth, JWT)
• CRUD для сообщений в блогах и комментариев к сообщениям в блогах
• Следуя за пользователями
• Глобальная лента всех блогов и лента блогов пользователей, на которых вы подписаны
• Система тегов
• Профили пользователей / редактирование информации профиля

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

Таблицы рабочего времени (счетчики времени) действительно учитывают множество сложных аспектов потока / сокращения и примитивов. Разбиение на страницы и кеширование очевидны, когда вы прокручиваете дни и недели назад и вперед. Также существует множество доступных для записи API. Здесь также задействовано гораздо больше, чем просто учет времени. Управление пользователями, сущностями проекта и т. Д.

Я думаю, это было бы здорово. Я немного боролся с этим, особенно с его созданием. Например, предположим, что у вас есть компонент ArticlePage, который создает такие новые статьи:

// shortened version

import { addArticle } from '../actions'

function doAddArticle(props, handleAdded, values, dispatch) {
  props.addArticle(values)
  .then(handleAdded)
}

class AddArticlePage extends Component {
  handleAdded = () => {
    this.props.pushState(null, '/articles/')
  };

  render() {
    return (
      <div>
        <ArticleForm submit={(values, dispatch) => doAddArticle(this.props, this.handleAdded, values, dispatch)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps, {
  pushState,
  addArticle
})(AddArticlePage)

1. Я даже не уверен, что это «правильный» вариант, чтобы связать обработанное обещание с перенаправлением.
2. Что, если я хочу получить идентификатор из вновь созданной статьи и вместо перенаправления на страницу индекса я хочу перенаправить на страницу /articles/{id}/ ?
3. Что, если моему компоненту нужен результат асинхронного действия? Для меня это появилось в моем компоненте ArticleForm с полем формы загрузки изображения: я отправляю действие «addImage», и когда изображение загружается, я хочу 1) показать предварительный просмотр загруженного изображения на основе URL-адреса и 2) хочу, чтобы назначьте URL-адрес форме. Но мне было трудно понять, как лучше всего это сделать в Redux. Проблема, которую я обнаружил, заключалась в том, что вам нужно иметь возможность сопоставить недавно добавленное состояние / изображение с опорой в компоненте формы, но 1) как вы получаете недавно добавленное изображение и 2) что, если одновременно загружаются 2 изображения, как вы получаете правильный URL-адрес изображения для нужного компонента?

Конечно, я занимаюсь Reduxing всего несколько месяцев, поэтому они могут быть глупыми проблемами, но как новичок они определенно сбили меня с толку, и я до сих пор не чувствую, что мои решения являются «правильным путем».

@jonathaningram вы вообще смотрели на redux-thunk? В качестве альтернативы тому, что вы делаете выше, он позволит вам отправлять сообщения из вашего действия

@babsonmatt да, я уже использую его. Я основал приложение на реальном примере, в котором оно используется. Возможно, я не использую его в полной мере.

@jonathaningram Спасибо за ваш пример. Как было указано, вы должны переместить логику перенаправления в thunk создателя действия и отправить обновление маршрута оттуда. Есть и другие способы управления побочными эффектами (перенаправление - это побочный эффект перехода состояния, вызванного этим действием), например, redux-saga или redux-side-effects. Но я думаю, что глубокая дискуссия выходит за рамки этого вопроса.

@sompylasar спасибо. Да, я не хочу отвлекаться от проблемы, но просто хотел поделиться своим «реальным» опытом как новичок в сокращении, который, надеюсь, поможет новым примерам, возникающим из этой проблемы.

@EricSimons Я хочу помочь. В настоящее время я поддерживаю приложение CRUD с использованием ядра-js, и я думаю, что многие из его идей хорошо трансформируются в redux. Дайте мне знать, если хотите провести мозговой штурм.

Недавно я начал проект по управлению состоянием CRUD (поверх REST). Исходя из Marionette/Backbone я действительно пропустил соглашения REST, когда начал копаться в React / Redux.

https://github.com/masylum/resting-ducks

Я не уверен, что решение является примерами. Думаю, для этого лучше подходят библиотеки. Управление состоянием почти всегда одно и то же, в 2016 году мы не должны писать код CRUD, а сосредоточиться на нашей бизнес-логике.

@EricSimons В настоящее время я оцениваю различные варианты, где указать потребности в данных и когда их получать. Одним из вариантов было бы реализовать что-то Relayish, но я чувствую, что это немного излишне. Что-то, что я придумал для проекта, - это указать мои потребности в загрузке в маршрутах с атрибутом загрузчика:

let routes = <Route path='/' component={Layout}>
  <IndexRoute component={BooksIndex} />
  <Route path='/book/new' component={BooksNew} />
  <Route path='/book/:id' component={BooksShow} loader={BooksLoader} />
  <Route path='/book/:id/edit' component={BooksEdit} loader={BooksLoader} />
</Route>;

BooksLoader - это класс, который реализует две функции:

• needToSyncStore (params, store) возвращает true, если хранилище необходимо синхронизировать, иначе false
• syncStore (params, store) синхронизирует магазин и вернет обещание

Вот очень простой пример реализации, который определенно можно заменить чем-то более умным (например, ImmutableJS / Map):

import _ from 'lodash';
import * as Actions from 'actions';
import API from 'api';

export default class BooksLoader {
  needsToSyncStore(params, store) {
    let books = store.getState().books;

    if(books) {
      const book = _.findWhere(books.collection, { isbn: params.id });
      if(book) {
        return false;
      }
    }

    return true;
  }

  syncStore(params, store) {
    let { dispatch } = store;
    let api = new API();

    let loadBooks = Actions.loadBooks();
    return loadBooks(dispatch, store.getState);
  };
}

Идея состоит в том, что загрузчик заботится только о состоянии, которое обеспечивается маршрутом и деревом состояний redux, что упрощает тестирование.

Следующая часть - это загрузчик магазина, который представляет собой компонент реакции, в значительной степени вдохновленный @ryanflorence AsyncProps (https://github.com/rackt/async-props), который можно использовать как RenderContext для ReactRouter: https: //gist.github. com / sebastiandeutsch / e6148ca0741cc355248c

Он проверяет маршруты ReactRouter на наличие загрузчиков и их выполнение. Он также показывает состояние загрузки через контексты. В действии это будет выглядеть так:

<Provider store={store}>
  <Router
    history={browserHistory}
    render={(props) => (
      <StoreLoader {...props} store={store} />
    )}>
      {routes}
    </Router>
</Provider>

В компоненте маршрута (это специальные компоненты, которые являются прямыми дочерними элементами маршрутизатора) я могу использовать такой контекст:

export class BooksShow extends React.Component {
  static contextTypes = {
    storeIsSynchronized: React.PropTypes.bool
  };
  ...
  render() {
    const { book } = this.props;

    if(this.context.storeIsSynchronized) {
      /* display components */
    } else {
      /* display loading spinner */
    }
}

export default connect(
  (state, props) => {
    return {
      book: _.findWhere(state.books.collection, { isbn: props.params.id } )
    }
  },
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(BooksEdit);

@gaearon Что вы думаете об этих идеях?

@sebastiandeutsch Мне нравится такой подход. Я тоже экспериментирую с Async-Props, ваши идеи здесь выглядят действительно круто.

Я предположил, что пример должен быть более общим, а не ориентированным на абстракцию для выборки данных. Мне очень нравится https://github.com/optimizely/nuclear-js/tree/master/examples/rest-api как базовый пример простого способа настройки хранилищ и действий для Rest API.

Я расширил его, чтобы поддерживать кеширование и даже хранить текущие запросы в магазине (так что, если запрос будет сделан снова, вызывающий просто получит отложенный вызов вместо повторной инициализации xhr. Более надежный пример того, о чем я говорю, находится здесь : https://github.com/jordangarcia/nuclear-api-module-example/tree/master/rest_api. И я с большим успехом скопировал некоторые концепции @jordangarcia . Я думаю, что подходы здесь могут хорошо работать с также redux (в сопровождении normalizr и т. д.).

@EricSimons - это проблема,

Меня больше всего интересует предмет (в худшем случае мы можем разместить наши собственные записываемые API-интерфейсы для использования людьми). Огромное спасибо всем вышеперечисленным комментаторам, кстати, это обсуждение до сих пор было фантастическим. Хотелось бы услышать больше мыслей / идей о том, что мы должны охватить в этих примерах.

К вашему сведению, @ dan-weaver и другие, заинтересованные в работе над этим, - не стесняйтесь написать мне

В мире Meteor есть один большой пример проекта с открытым исходным кодом, который возник из книги о Meteor. Это проект Telescope , веб-приложение, похожее на Reddit или Hacker News. Если бы у Redux был подобный пример, это было бы здорово. Многие разработчики изучили Meteor, следуя книге и создав вместе с ней уменьшенную версию Telescope. Такое приложение, как Telescope, охватывало бы все темы, поднятые Дэном в отношении приложения, с которым большинство разработчиков уже знакомо (из-за Hacker News, Reddit, ...).

Я начал создавать основу для аналогичного приложения несколько месяцев назад в webapp *. В этом проекте уже настроен процесс сборки, css-модули, аутентификация, отдельный сервер для API, MongoDB, рендеринг на стороне сервера, GraphQL и многое другое (хотя некоторые вещи могут быть немного устаревшими, требуют дополнительной работы или могут быть выполнены лучше). Кроме того, у него есть разделение редуктора, чего, как мне кажется, нет ни в одном другом примере. Ему не хватает хороших решений для получения данных, оптимистичных обновлений, данных в реальном времени. Кроме того, это немного устарело, так как 2 месяца кажутся вечностью в том, насколько быстро все прогрессирует прямо сейчас :)

Если вам нужна отправная точка для создания примера для курса, возможно, _webapp_ может стать источником вдохновения. И я бы хотел увидеть что-то похожее на Telescope в Redux.

* _Папка ноу-хау содержит некоторую информацию об архитектуре / принятых решениях.

_Sidenote: _ Поскольку я заметил, что Redux не умеет получать данные, я сейчас создаю систему, похожую на Relay, которая интегрируется с Redux. По этой причине я не обновлял _webapp_ уже 2 месяца. Если мне удастся создать эту систему, я продолжу использовать _webapp_.

Одна из возникающих проблем заключается в том, что Redux находится на очень низком уровне и поэтому не имеет мнения о том, как вы _ фактически_ строите приложение на его основе. Поэтому я не уверен, можем ли мы просто поддерживать _один_ примерную кодовую базу для обучения, поскольку существует так много возможных допустимых абстракций _between_ redux и конечный пользовательский интерфейс. Это иллюстрируется некоторыми обсуждениями в этой ветке, где представлено множество различных возможностей для загрузки данных без явного победителя - нет единого правильного пути, поскольку масштабы приложений сильно различаются.

По этой причине желательно придумать "_The_ Advanced TODOMVC of Redux" для спецификации, которая требует всех расширенных функций, о которых ранее упоминал Дэн.

По мере продвижения вперед, я полагаю, мы начнем видеть больше абстракций / библиотек / фреймворков _around_ Redux, которые могли бы использовать это продвинутое приложение в качестве доказательства концепции. Фактически, со временем это может быть переименовано, чтобы оно не было специфичным для Redux.

Что касается API, мне бы хотелось, чтобы он соответствовал какому-то стандарту ( JSON-API обеспечивает отличную основу для денормализации и описания отношений) и, в конечном итоге, перед ним был сервер GraphQL.

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

Со стороны, но частично связанной, примечание из конкретной темы здесь, я думаю, нам было бы хорошо, если бы мы расставили приоритеты в этом вопросе по прояснению объема Redux - подчеркнув низкоуровневую природу.

Пс. У меня скоро на React London состоится

Я был бы готов поработать над этим, я думаю, что предоставление новичкам удобного, прокомментированного и объясненного приложения Redux, которое не является списком задач, - отличная идея. Началась ли работа над этим @EricSimons?

Кажется, есть много похожих вопросов о том, как уменьшить шаблон redux и построить с ним что-то реальное. Я думаю, что нашел довольно хорошее решение (среди прочего), о котором я писал здесь:

https://medium.com/@timbur/react -automatic-redux-provider-and-replicators-c4e35a39f1

TL; DR: вы можете создавать redux провайдеров, которые автоматически сопоставляют себя с вашими компонентами на основе их propTypes . Все, что вам действительно нужно, это каталог components каталог providers и необязательный, но рекомендуемый каталог themes . Все легко взаимозаменяемо, понятно, обслуживается, расширяемо и многоразово. Во все, что входит, например, горячая перезагрузка клиента и сервера, рендеринг сервера и т.д. Обычно это занимает 1 час. :)

Исходя из своего опыта, я бы предпочел не использовать Github API в качестве примера.

• Его аутентификация слишком сложна для тех, кто ищет что-то, что «просто работает».
• Это не подходит для экспериментов. Чтобы избежать деструктивных действий при мутации API, мне пришлось бы создать отдельную учетную запись Github.

Вместо этого используйте простой пользовательский API. Мы не хотим зависеть от 3-х сторон и позволяем кому-либо запускать свой собственный экземпляр, как мой пример BottledAPI (wip) в json-server .

Это также позволит реализовать другие бэкэнд-реализации отдыха на Javascript, Java, C #, PHP и т. Д. Это поможет кикстарту разработки, так как это довольно удобно.

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

Привет, ребята! Я изучаю ReactJS и разработал версию своего личного сокращателя URL-адресов с помощью React + Redux. В моем примере для разработки интерфейса используются Gulp + Browserify + Babelify. Я написал модульные тесты с использованием Mocha и Enzyme для компонентов и действий. В этом примере также есть:

• Операции создания, чтения и обновления
• Аутентификация с помощью Json Web Token
• Пагинация
• Теги
• CORS

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

Демо: https://gustavohenrique.github.io/gh1
Источник: https://github.com/gustavohenrique/gh1

Я принимаю предложения о том, как улучшить этот пример. Спасибо!

Немного поздно для вечеринки, но я только что запустил полноценное веб-приложение для управления, построенное на Redux.

Мы используем redux-thunk для асинхронных заданий и используем redux-ignore, что обеспечило удивительное улучшение (_на мобильных_), просто отфильтровав наши редукторы верхнего уровня.
Веб-приложение на 100% адаптивно, поэтому его легко использовать / тестировать на мобильных устройствах.

Мы управляем оптимистичными обновлениями, «откатывая» предыдущее действие. Затронутые редукторы знают, как отследить свой путь к предыдущему состоянию, поэтому он достаточно изолирован и эффективен.

Во всяком случае, вот ссылки http://www.handy-erp.com/en/
Просто создайте учетную запись и выбейте себя из строя.

@SebastienDaniel Поздравляю! это красивый сайт. Вы помещали часть redux в какой-нибудь публичный репозиторий?

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

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

Во-первых, спасибо, что поделились кодом! @Gustavohenrique
Другие вещи:
Думаю может быть список пользователей? авторизоваться? регистр...
redux нужны эти примеры!

Я согласен с @gggin и @EricSimons, полностью готовая к производству версия этих функций была бы потрясающей:

Аутентификация (электронная почта / пароль и oAuth, JWT)
CRUD для сообщений в блогах и комментариев к сообщениям в блогах
Следуя за пользователями
Глобальная лента всех блогов и лента блогов пользователей, на которых вы подписаны
Система тегов
Профили пользователей / редактирование информации профиля

В дополнение к этому, была бы отличной базовая система ролей или разрешений. Что-то эквивалентное командам GitHub или участникам Trello

Всем привет,

Я работал над свободным предложением для надежного redux crud api основываясь только на моем опыте за последние пару недель:

https://github.com/ppiekarczyk/redux-crud-api-middleware/blob/master/README.md

Любая обратная связь будет признательна. Спасибо!

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

Привет всем - мы рады сообщить, что примерная кодовая база почти готова к рассмотрению. Он очень тщательный и охватывает большинство реальных случаев использования, о которых мы говорили в этой ветке (аутентификация, CRUD, разбиение на страницы и т. Д.). @ vkarpov15 нужно кое-что закончить, но он должен быть готов в начале следующей недели.

Мы будем рады вашей помощи в проверке кодовой базы. Я знаю, что @gaearon упомянул, что он был бы готов взглянуть на него несколько месяцев назад, и любые и все отзывы сообщества здесь были бы превосходными. Мы будем использовать это репо для исходной кодовой базы, пока мы проверяем и повторяем, а затем объединяем окончательный вариант в официальное репозиторий redux, когда он будет готов. Не стесняйтесь отмечать / смотреть, и я также опубликую обновление в этой теме, как только кодовая база будет в сети и будет готова к рассмотрению.

С радостью отвечу на любые вопросы и спасибо всем за отличное обсуждение!

Звучит отлично. Не забудьте добавить упоминание и ссылку в соответствующем вопросе часто задаваемых вопросов Redux, когда он будет готов.

Как и было обещано, база кода готова для просмотра на https://github.com/GoThinkster/redux-review , хотелось бы услышать отзывы всех. Вопросы и PR приветствуются!

Привет, ребята, большое спасибо за отличное обсуждение и за приведение отличного примера из реальной жизни ...

Чтобы добавить к списку таких примеров, я наткнулся на этот пример https://github.com/andrewngu/sound-redux , рабочую демонстрацию, развернутую на https://soundredux.io/. Похоже, он также соответствует критериям, о которых говорил @gaearon . Но я не уверен, поэтому было бы полезно, если бы кто-то мог дать отзыв. Если он действительно подходит, это будет хорошим дополнением к списку. Плюс его активно поддерживают последние полтора года.

И, наконец, особая благодарность @EricSimons за

Я действительно добавил запись в FAQ, которая указывает на ряд реальных приложений React и Redux, на http://redux.js.org/docs/faq/Miscellaneous.html#miscellaneous -real-projects. (На самом деле, я знаю, что видел это приложение Sound-Redux раньше, но не думаю, что добавил его в свой список. Мне придется это сделать.)

Я собираюсь пойти дальше и закрыть эту проблему на том основании, что больше нет необходимости добавлять более крупный пример непосредственно в репозиторий Redux, учитывая количество «реальных» приложений, которые мы можем указать на. Если кто-то хочет активно внести конкретный пример в репо, скажите что-нибудь, и мы сможем снова открыть это.

И да, спасибо всем, кто предоставил обсуждение и примеры!