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

Question

Мой код

Есть ли у кого-нибудь пример кода с использованием семантической реакции входов и хранения значений / информации в хранилище / состоянии с использованием приставки?

Answer 1

Я предложу лучший подход к обучению.Вместо вопроса «Как использовать входы Semantic-UI-React с Redux» правильный вопрос - «Как правильно использовать формы в React?».Я бы посоветовал вам прочитать статьи Гоши Аринича о формах React , особенно пост о «контролируемых» и «неконтролируемых» входах .

После того, как вы настроилидо формы с контролируемыми входами, которая хранит данные в состоянии компонента React, вы можете расширить это, чтобы вместо этого переключить данные в Redux.Замените вызов this.setState() на отправку действия Redux и замените <input value={this.state.someValue}> на <input value={this.props.someValue}>, где данные реквизита поступают из Redux.

My Серия блогов "Practical Redux" демонстрируетпримеры форм, которые получают свои данные из Redux, в частности:

• Практический Redux, Часть 6. Связанные списки, формы и производительность
• ПрактическийRedux, часть 7: Обработка изменения формы и редактирование данных
• Практическое Redux, Часть 8: Управление данными формы черновика

В качестве бонуса,В серии «Practical Redux» также используется Semantic-UI-React, но принципы использования контролируемых входных данных должны работать независимо от того, какую библиотеку вы используете для генерации входных данных.

Answer 2

Я бы порекомендовал использовать redux-form , чтобы поместить состояние формы в Redux.Все инструменты, включенные в эту библиотеку, вероятно, будут более полезными для вас.Он имеет проверку формы, позволяет увидеть, является ли форма грязной и т. Д.

Вот пример того, как будет использоваться избыточная форма с SUIR и проверка формы.Это выше того, что вы пытаетесь сделать, но ваша простая реализация также включена в пример.https://gist.github.com/mairh/233f6b4ffdbaaed8ec75bb0bef087e8f