Вопросы с тегами [react-redux]

0

голосов
1

ответ
8

Просмотры

ReactJS - После того, как компонент крепления необходимо импортировать / повторно запустите локальный файла JavaScript

Нужно импортировать «validation.js» файл внутри другого файла JavaScript в reactjs раз основной файл визуализации метод завершает его выполнения импорта»./Validations'; должен вынести этот JS файла, как только основной компонент визуализирует способ завершить выполнение
Sriram Karthick
0

голосов
0

ответ
25

Просмотры

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

TLDR: Как бы я лучше отобразить массив в initalState проп Следующий код им пытаются попытка извлечь все postIds из массива, как и сравнить post.id с like.postId Однако like.postId не определен. post.id доступен на лог консоли, разница между столбами, и любит то, что сообщения отображаются на стороне клиента, и любит не являются. Так им пытаются сделать отображение в редукторе, потому что я должен был бы получить сумму, как подсчетов хранимых для каждой должности, и сопоставить его с его уважаемым post.id. Причина, почему я должен был бы установить значения в подобных InitialState, потому что я должен был бы использовать это следующие действия для upvote Сообщений случая ADD_LIKE: // console.log (action.id) // предоставляет идентификатор сообщения, который 2 // console.log (state.posts) // записывает сообщения массива // console.log (состояние. сообщений) возвращение {... состояние, любит: state.likes + 1}; если я сделать что-то подобное, как [0] .postId это будет только получить значения только для этого like.id. Мне нужно, чтобы быть в состоянии получить все любит со всех постов и сравнить like.postId с post.id, а затем установите значение. И получить счетчик как {this.props.likes} только, чтобы получить представление о том, что массив выглядит. Это пример сообщения массива, и в массиве сообщений, у вас есть массив любит. Вот как им-вызова сообщения экспорта константного GetPosts = () => {возвращение (отправка, GetState) => {вернуться Axios.get ( '/ API / сообщения / myPosts') .then ((Рез) => {константные данные = res.data Const любит = res.data // возвращает первый элемент в массиве, и показывает люблю. константный myLikes = любит. журнал (like.postId) // делает неопределенными, //}})})}} это, как его привязывается PostList.js визуализации () {константные {сообщений} = this.props; Возвращение ({posts.map ((пост, я) => ({/ * {...} пост не позволяет нам писать все свойства из * /}))}) действие} GetPosts вызывается внутри этого компонента класса сообщений Компонент расширяет {State = {сообщения: [], загрузки: правда, isEditing: ложь,} асинхронной componentWillMount () {ждут this.props.GetPosts (); this.setState ({загрузка: ложь}) константное reduxPosts = this.props.myPosts; Const ourPosts = reduxPosts console.log (reduxPosts); // показывает линию сообщений 35} визуализации () {сопз {} = нагрузка this.state; константный {myPosts} = this.props если {возвращение () (this.props.isAuthenticated!); } Если (нагрузка) {возвращение "загрузка ..."} возвращение (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения)); } Вернуться (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения)); } Вернуться (сообщения); }} Const mapStateToProps = (состояние) => ({isAuthenticated: state.user.isAuthenticated, myPosts: state.post.posts}) = Const mapDispatchToProps (отправка, состояние) => ({GetPosts: () => отправка (GetPosts ())}); экспорт по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (сообщения));
Mr Patel
0

голосов
0

ответ
4

Просмотры

Реагировать-Testing-Library - Упаковочный компонент с Redux и маршрутизатором

Я пытаюсь настроить файл тест для визуализации маршрута / страниц на моем приложении. Я пытаюсь обернуть все с Redux и маршрутизатором, и это то, что у меня есть: импорт Реагировать из «реагировать»; импорт {оказывают} от «среагировать тестирования-библиотека»; импорт {} createStore от 'Redux'; импорта {} Провайдер от 'среагировать-Redux'; импорт редуктор от «../../store/reducer»; импорт {Ссылка, маршрут, маршрутизатор, коммутатор} от «реагировать-маршрутизатор-дом» импорта {createMemoryHistory} из «истории» импорта ViewNode из «../Pages/ViewNode»; Const customRender = (щ, {путь = '/', история = createMemoryHistory ({initialEntries: [путь]}), InitialState, магазин = createStore (редуктор, InitialState), ... опции} = {}) => ({ ... оказывать ({щ}, варианты), история,}); тест ( 'может сделать с Redux и маршрутизатором', () => {сопз {getByTestId} = customRender ({маршрут: '/server/prod/some.server.name.com'}); ожидать (getByTestId (» страниц контента.)) toBeVisible ()}) Тогда я получаю следующее сообщение об ошибке: ошибка: неперехваченным [TypeError: не удается прочитать свойство „Params“ неопределенной] причина этого бросает ошибку, потому что не может найти Реагировать маршрутизатор PARAMS , Это провал в конструкторе компоненты при Im инициализации состояния: this.state = {модальный: ложь, activeTab: '1', imageStatus: "загрузка", ENV: props.match.params.env, // неудачи здесь NODENAME: реквизит .match.params.nodeName, сред: props.environments} Похоже, что это ISN» т оберточной маршрутизатор правильно с моей реализации выше. Как бы я правильно обернуть мою страницу компоненту с Redux и маршрутизатором так, что он может получить этот маршрутизатор Params?
Phillip
1

голосов
2

ответ
30

Просмотры

Передача нового состояния детского компонента в React

Я подключил Главная компонента реквизита методом действия и направить редуктор успешно. Все, кажется, работает хорошо, я могу видеть данные Api подходит к редуктору в консоли. Проблема в том, реагирует не пересборку ProfileGroupsWidget. this.props.user всегда {} в этом детском компоненте, я ожидал, что это будет {имя: "John Doe"} Вот userReducer, "GET_AUTH_USER_SUCCESS" происходит от getAuthenticatedUser: Const InitialState = {}; Const userReducer = (состояние = InitialState, действие) => {переключатель (action.type) {случай 'GET_AUTH_USER_SUCCESS': console.log ( 'Вывод:', action.user); // {имя: "Джон Доу"} состояние = action.user парадная; по умолчанию: парадная}} экспорт {userReducer} Главная моя Главная составляющая: импорт React, {Компонент} от «реагируют»; импорта ProfileGroupsWidget от импорта»./Widgets/ProfileGroupsWidget.js' {} соединить с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home); /Widgets/ProfileGroupsWidget.js' импорта {} соединиться с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home); /Widgets/ProfileGroupsWidget.js' импорта {} соединиться с 'реагируют-Redux' импорта {} UserActions от "../_actions/userActions"; Класс Home расширяет компонент {конструктора (реквизит) {супер (реквизит); this.state = {пользователь: this.props.user} this.props.getAuthenticatedUser (); } Визуализации () {возвращение ()}} Const mapStateToProps = состояние => {вернуть состояние} функция mapDispatchToProps (отправка) {возвращение {getAuthenticatedUser: () => {отправка (userActions.getAuthenticatedUser ())}}} // Connect Home компонент реквизит с хранением данных: экспорт по умолчанию подключается (mapStateToProps, mapDispatchToProps) (Home);
tolga
1

голосов
0

ответ
881

Просмотры

Создание идентификаторов для React компонентов для Selenium тестов

Я хотел бы генерировать идентификаторы для почти каждого элемента в моем веб-сайте, чтобы иметь более легкую обработку элементов для Selenium тестов времени. Это хороший подход? Мое приложение изменяет совсем немного. Я не могу добавить атрибут ID HTML в React компоненту, потому что React интерпретирует его как реквизит например ... и Нюэл получает идентификационный реквизит вместо атрибута. Иногда я не могу получить доступ к React компонента, потому что я использую компоненты сторонних. Как я должен изменить этот идентификатор атрибута? Является ли мой подход хорошим решением?
Patryk Janik
1

голосов
2

ответ
51

Просмотры

Получение ошибки «отправка не является функцией» при объединении двух файлов [ReactJS]

Я создаю приложение списка задач с использованием reactJS. Если я пишу две разные логики в двух отдельных файлах она работает просто отлично, но при объединении этих двух файлов он дает ошибку. RenderRemaining.js файл: импорт Реагировать из «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт магазин от «../store/store»; импорт RenderRemainingData из './RenderRemainingData'; Const RenderRemaining = (подпорки) => {возврата (задачи: {props.list.map ((подробно) => {возвращение})}); } Const mapStateToProps = (состояние) => {{список возврата: state.todoReducer}; } Экспорта по умолчанию подключения (mapStateToProps) (RenderRemaining); RenderRemainingData.js файл: импорт Реагировать из «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт removeTodo из '../actions/removeTodo'; Const RenderRemainingData = ({диспетчерская, TODO, идентификатор, описание, IsCompleted}) => {если (IsCompleted!) {возвращение ({TODO} {отправка (removeTodo ({TODO, описание, идентификатор}));}}> {описание }); } Вернуться ложным; } Экспорта по умолчанию подключения () (RenderRemainingData); Теперь выше код работает просто отлично. После объединения двух вышеупомянутых файлов в качестве своего файла в расслоении плотного RenderRemaining.js и удаления RenderRemainingData.js файла. RenderRemaining.js файл: (после объединения) импорта Реагировать от «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорт магазин от «../store/store»; импорт removeTodo из '../actions/removeTodo'; Const RenderRemainingData = ({диспетчерская, TODO, идентификатор, описание, IsCompleted}) => {если (IsCompleted!) {возвращение ({TODO} {отправка (removeTodo ({TODO, описание, идентификатор}));}}> {описание }); } Вернуться ложным; } Const RenderRemaining = (подпорки) => {возврата (Задачи: {props.list.map ((подробно) => {возвращение})}); } Const mapStateToProps = (состояние) => {{список возврата: state.todoReducer}; } Подключить () (RenderRemainingData); экспорт по умолчанию подключается (mapStateToProps) (RenderRemaining); Теперь, когда происходит событие OnClick дает ошибка отправки не функция в консоли. Я не знаю, почему это происходит.
Devesh Patel
1

голосов
1

ответ
108

Просмотры

Хранить все состояние в Redux и группы / состояние гнезда на странице / просмотреть следующую структуру папок

Как новичок в Redux, один из самых сложных частей обучения Redux решает, что происходит в Redux и то, что остается, как локальное состояние. Я прочитал большую часть документации, но все-таки я думаю, что это довольно трудно решить. В моем случае, я в конечном итоге положить все состояние в Redux, так как приоритет мелкозернистого контроля: как путешествия во время и возможность предварительной загрузки всего состояния приложения из конфигурационных файлов было высокого приоритета. Кроме того, вы получите бонус, чтобы быть в состоянии проверить все состояние в приложении в 1-е место с Redux инструментов Дев, что приятно. Мне понравилась идея предложенная здесь: https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38, которая в значительной степени зависит от состава редуктора, поэтому я реализовал это так , Идея заключается в том, что; раскрой, хранения и инкапсулирования компоненты и состояние, в котором он используется, а также так состояние отражает структуру папок вашего приложения. Таким образом, ваш проект и состояние настолько хорошо структурирована, это на самом деле почти так же легко поставить государство в Redux, чем при использовании локального состояния - и, безусловно, кажется, стоит немного дополнительной LOC. Это, кажется, работает довольно хорошо, но я должен сказать, что я удивляюсь, почему так мало людей, кажется, рекомендую делать это таким образом. В Redux приложения, где у вас есть много разных страницы / маршрутов с различным состоянием на каждый, будет ли тогда считать правильный подход к групповому состоянию на странице / маршруте, или это какое-то анти шаблон? {ReduxRoute: {/ * доступны глобально * /} сессия: {/ * глобально доступен * /} данные: {/ * доступные глобально * /} сцены: {Стр.1: {State1: {/ * Щ состояние специально для этого вида / страница * /} состояние2: {/ * щ состояния специально для этого вида / страница * /} данных: {/ * состояние данных специально для этого вид / страницы * /}}, Страница2: {state3: {/ * щ состояние специально для этого вида / страница * /} state4: {/ * щ состояния специально для этого вид / страницы * /} другие данные: {/ * состояние данных специально для этой точки зрения / страница * /}} }} Сейчас приложение работает, но я не собираюсь держать Page1 состояние при переходе к Page2 - Я только хочу, чтобы представить это хорошо, когда вы находитесь на данной странице / представления / сцены. Таким образом, я думал о том, что вызвало действие RESET_PAGE1_STATE в функции componentDidUnmount жизненного цикла Page1 (для всех страниц), чтобы исправить это. Причиной этого вопроса является то, что вы обычно слышите людей рекомендуют хранить вещи на самом высоком уровне, но с определенным состоянием является значением только для определенных страниц / просмотров / сцены, я хотел бы, чтобы структурировать это немного больше и избежать ненужного valies неопределенного для state3 и state4 в моем корневом состоянии, когда находясь на Page1 - поэтому группировку. Некоторые люди, вероятно, сказать, что если у вас есть такая проблема, вы, вероятно, делают это неправильно. Если какое-то состояние относится только к одной странице / просмотра / сцены некоторые, вероятно, сказать, что это принадлежит в местном государстве - но для дополнительного контроля я упомянул (время в пути и возможность предварительной загрузки все приложения из файлов конфигурации) - конечно, это необходимо сохранить все это в Redux права? Надеюсь, что это имеет смысл. Благодарю. при нахождении на Page1 - поэтому группировке. Некоторые люди, вероятно, сказать, что если у вас есть такая проблема, вы, вероятно, делают это неправильно. Если какое-то состояние относится только к одной странице / просмотра / сцены некоторые, вероятно, сказать, что это принадлежит в местном государстве - но для дополнительного контроля я упомянул (время в пути и возможность предварительной загрузки все приложения из файлов конфигурации) - конечно, это необходимо сохранить все это в Redux права? Надеюсь, что это имеет смысл. Благодарю. при нахождении на Page1 - поэтому группировке. Некоторые люди, вероятно, сказать, что если у вас есть такая проблема, вы, вероятно, делают это неправильно. Если какое-то состояние относится только к одной странице / просмотра / сцены некоторые, вероятно, сказать, что это принадлежит в местном государстве - но для дополнительного контроля я упомянул (время в пути и возможность предварительной загрузки все приложения из файлов конфигурации) - конечно, это необходимо сохранить все это в Redux права? Надеюсь, что это имеет смысл. Благодарю. Если какое-то состояние относится только к одной странице / просмотра / сцены некоторые, вероятно, сказать, что это принадлежит в местном государстве - но для дополнительного контроля я упомянул (время в пути и возможность предварительной загрузки все приложения из файлов конфигурации) - конечно, это необходимо сохранить все это в Redux права? Надеюсь, что это имеет смысл. Благодарю. Если какое-то состояние относится только к одной странице / просмотра / сцены некоторые, вероятно, сказать, что это принадлежит в местном государстве - но для дополнительного контроля я упомянул (время в пути и возможность предварительной загрузки все приложения из файлов конфигурации) - конечно, это необходимо сохранить все это в Redux права? Надеюсь, что это имеет смысл. Благодарю.
Soren
1

голосов
0

ответ
59

Просмотры

Redux магазин из заказа для проверки электронной почты, существует возможность

Я пытаюсь сделать функцию, которая проверяет, является ли введенный адрес уже взят с Redux. Я не уверен, почему состояние моего магазина, кажется, как будто это 1 состояние позади. Я подозреваю, что это может быть состоянием гонки из моих обещаний, но я не уверен относительно того, где это происходит. Поэтому состояние моего магазина изменяет значение в дальнейшем, а также почему выходах инструмента разработчика являются из строя. Сценарий 1: Введите в электронной почте, что берется: {} {возвращение {действия: bindActionCreators (createAccountActions, отправка)}; }; mapStateToProps используется для размещения магазина состояния в this.props, в частности, isEmailTaken константного mapStateToProps = (состояние, ownProps) => {{возвращение createdAccount: state.createdAccount, isEmailTaken: state.isEmailTaken}; }; checkEmailExist действие: Функция экспорта checkEmailExist (электронная почта) {константные заголовки = новые заголовки ({ "Content-Type": "текст / равнинный, кодировка = UTF-8"}); константные параметры = {метод: 'GET', заголовки}; возврат отправка => {возвращение принести ( `$ {apiEndpoints.CHECK_EMAIL_EXIST_ENDPOINT} / $ {}` электронной почты, опции) .then (Рез => {если (res.ok) {res.json (). Затем (v => { console.log ( "значение:" + v). возврат отправка (emailExists (v));});} еще {console.log ( "Рез нет окей");}}) задвижка (ошибка => {}) ; }; } emailExists действие: функция экспорта emailExists (v) {возвращение {тип: (v types.EMAIL_EXISTS: types.EMAIL_DOES_NOT_EXIST)}; } Разбавление: экспорт по умолчанию (состояние = {}, действие = {}) => {переключатель (action.type) {случай types.EMAIL_DOES_NOT_EXIST: возвращение {существует ложь}; случай types.EMAIL_EXISTS: возвращение {существует: истинно}; по умолчанию: возвращает состояние; }}; Все редукторы связаны с: экспорт по умолчанию combineReducers ({isEmailTaken, ...});
Liondancer
1

голосов
2

ответ
1.8k

Просмотры

Попытка получить файл миниатюру предварительного просмотра для отображения

Просто пытаюсь получить миниатюрное изображение предварительного просмотра, чтобы сделать с OnDrop (). Что-то я видел на нескольких сайтах, где вы уронили документ, и это показывает эскиз первой страницы. Я либо получить сломанную ссылку изображение, или нет изображений на всех. Это то, что я использую в качестве ссылки, хотя и не найти официальную документацию слишком полезно: https://react-dropzone.js.org/ React-Dropzone предварительного просмотра изображения не показывает https://medium.com/technoetics/handling- файл-загрузки-в-reactjs-b9b95068f6b А вот код, я в настоящее время использую. Это не делает эскиз, но Сохранить и Отмена смещаться вниз, как что-то есть, но я не вижу ничего. импорт _ из 'lodash'; импорта React, {Компонент} от 'реагируют'; импорта {} соединить с 'среагировать-Redux'; импорт {submitDocument} от»../ .. / Действия / документы; импорт Dropzone из 'реагируют-DropZone'; Класс SubmitDocuments расширяет компонент {конструктор () {супер (); this.state = {filesToBeSent: [], filesPreview: [],} this.handleClick = this.handleClick.bind (это); this.handleSubmit = this.handleSubmit.bind (это); this.onDrop = this.onDrop.bind (это); } HandleClick (событие) {this.setState ({filesToBeSent: [], filesPreview: [],}); } HandleSubmit (событие) {event.preventDefault (); this.props.submitDocument (this.state.filesToBeSent); } OnDrop (acceptedFiles) {console.log (acceptedFiles); вар filesToBeSent = this.state.filesToBeSent; _.map (acceptedFiles, е => {filesToBeSent. unshift (е); }); filesToBeSent = _.uniqBy (filesToBeSent, 'имя'); вар filesPreview = []; _.map (filesToBeSent, я => {filesPreview.unshift ({/*{i.name} - {i.size} байт * /})}); this.setState ({filesToBeSent, filesPreview}); } Визуализации () {возвращение (Submit документы Нажмите, чтобы добавить файлы или перетаскивать файлы здесь, чтобы загрузить {this.state. filesPreview} Подтвердить Отменить); }} Функция mapStateToProps (состояние) {возвращение {survey_id: state.documents.survey_id}} экспорта по умолчанию подключения (mapStateToProps, {submitDocument}) (SubmitDocuments); Теперь изменение следующих результатов в разорванных изображениях: Вещи загрузка штрафа, хотя. Что я делаю неправильно здесь? Я чувствую, что моя интерпретация предварительного просмотра может отличаться от того, что означает, что документация, или что это относится только к файлам изображений, в то время как шахта должна применяться к .pdf, .xlsx., .Txt. EDIT Это то, что console.log (filesToBeSent) выглядит. Это то, что я похож после lodash _.map (filesToBeSent, я => {}. }} Функция mapStateToProps (состояние) {возвращение {survey_id: state.documents.survey_id}} экспорта по умолчанию подключения (mapStateToProps, {submitDocument}) (SubmitDocuments); Теперь изменение следующих результатов в разорванных изображениях: Вещи загрузка штрафа, хотя. Что я делаю неправильно здесь? Я чувствую, что моя интерпретация предварительного просмотра может отличаться от того, что означает, что документация, или что это относится только к файлам изображений, в то время как шахта должна применяться к .pdf, .xlsx., .Txt. EDIT Это то, что console.log (filesToBeSent) выглядит. Это то, что я похож после lodash _.map (filesToBeSent, я => {}. }} Функция mapStateToProps (состояние) {возвращение {survey_id: state.documents.survey_id}} экспорта по умолчанию подключения (mapStateToProps, {submitDocument}) (SubmitDocuments); Теперь изменение следующих результатов в разорванных изображениях: Вещи загрузка штрафа, хотя. Что я делаю неправильно здесь? Я чувствую, что моя интерпретация предварительного просмотра может отличаться от того, что означает, что документация, или что это относится только к файлам изображений, в то время как шахта должна применяться к .pdf, .xlsx., .Txt. EDIT Это то, что console.log (filesToBeSent) выглядит. Это то, что я похож после lodash _.map (filesToBeSent, я => {}. Вещи загрузки прекрасно, хотя. Что я делаю неправильно здесь? Я чувствую, что моя интерпретация предварительного просмотра может отличаться от того, что означает, что документация, или что это относится только к файлам изображений, в то время как шахта должна применяться к .pdf, .xlsx., .Txt. EDIT Это то, что console.log (filesToBeSent) выглядит. Это то, что я похож после lodash _.map (filesToBeSent, я => {}. Вещи загрузки прекрасно, хотя. Что я делаю неправильно здесь? Я чувствую, что моя интерпретация предварительного просмотра может отличаться от того, что означает, что документация, или что это относится только к файлам изображений, в то время как шахта должна применяться к .pdf, .xlsx., .Txt. EDIT Это то, что console.log (filesToBeSent) выглядит. Это то, что я похож после lodash _.map (filesToBeSent, я => {}.
sockpuppet
1

голосов
0

ответ
232

Просмотры

How to connect a tab navigator to redux?

I am new to redux and I need to call for an action inside the onPress method as shown here const HomeTabNavigation = TabNavigator( { Profile: { screen: Profile }, PhotoCard: { screen: PhotoCard }, Chat: { screen: Chat } }, { tabBarComponent: props => { return ( { if (props.navigation.state.index !== 0) { props.navigation.navigate("Profile"); this.props.setCurrentDisplayingScreen("Profile"); } }} /> { if (props.navigation.state.index !== 1) { props.navigation.navigate("PhotoCard"); this.props.setCurrentDisplayingScreen("PhotoCard"); } }} /> { if (props.navigation.state.index !== 2) { props.navigation.navigate("Chat"); this.props.setCurrentDisplayingScreen("Chat"); } }} /> ); } } ); // Connect redux to call actions and receive new states export default connect(null, actions)(HomeTabNavigation); As shown in the code I want to call an action when tapping on the tab bar icon to navigate to another tab. If I do that I get the following error: "invariant violation: this navigator has both navigation and container props, so it is unclear if it should own its own state"
Ahmed Samy
1

голосов
2

ответ
351

Просмотры

Как использовать StackNavigator с Redux?

Может кому-то понравиться мне помочь справиться с StackNavigator и Redux интеграции? Все выглядит довольно просто, но не работает. index.ios.js импорт Реагировать из «реагировать» импорт {AppRegistry} из «реагируют родной» импорта {Provider} от «реагировать-Redux» импортной configureStore от импорта «./configureStore» {StackNavigator} от „среагировать-навигации“; импорт Приветствие «./screens/welcome»; импорт учетных записей из «./screens/accounts»; Const магазин = configureStore () Const нав = StackNavigator ({Добро пожаловать: {экран: Добро пожаловать,}, счета: {экран: счета,},}); Const TestApp = () => () AppRegistry.registerComponent ( 'TestApp', () => RNRedux) configureStore.js импорта {createStore} из '' перевождь импорта rootReducer из». / РЕДУКТОРЫ функция экспорта по умолчанию configureStore () {пусть магазин = createStore (rootReducer) возвращение магазин} редукторы / index.js импорт {combineReducers} из '' импорт счетов из»Redux сопзЬ rootReducer ./accounts' = combineReducers ({} счета) экспорт по умолчанию экраны rootReducer / accounts.js импорт реагировать из «реагировать»; импорт {StyleSheet, текст, вид, кнопка} от «реагирует родную»; импорт {ListItem} из 'реагирующих-носителями элементов'; импорт {StackNavigator} от 'реагируют-навигации'; импорта {} соединить с 'среагировать-Redux'; экспорт класс Accounts расширяет React.Component {статическое navigationOptions = {названия: 'Accounts',} конструктор (реквизит) {супер (реквизит); } Визуализации () {состояние} = {{сопзЬ перемещаться} = this.props.navigation; Возвращение ({this.props.accounts.map ((L, I) => ())}); }} Функция mapStateToProps (состояние) {возвращение {счета: state.accounts}} экспорта по умолчанию подключается (mapStateToProps,) (Accounts) редукторы / accounts.js константного InitialState = {счета: [{названия: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращает состояние; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. Карта ((L, I) => ())}); }} Функция mapStateToProps (состояние) {возвращение {счета: state.accounts}} экспорта по умолчанию подключается (mapStateToProps,) (Accounts) редукторы / accounts.js константного InitialState = {счета: [{названия: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращает состояние; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. Карта ((L, I) => ())}); }} Функция mapStateToProps (состояние) {возвращение {счета: state.accounts}} экспорта по умолчанию подключается (mapStateToProps,) (Accounts) редукторы / accounts.js константного InitialState = {счета: [{названия: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращает состояние; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. }} Функция mapStateToProps (состояние) {возвращение {счета: state.accounts}} экспорта по умолчанию подключается (mapStateToProps,) (Accounts) редукторы / accounts.js константного InitialState = {счета: [{названия: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращает состояние; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. }} Функция mapStateToProps (состояние) {возвращение {счета: state.accounts}} экспорта по умолчанию подключается (mapStateToProps,) (Accounts) редукторы / accounts.js константного InitialState = {счета: [{названия: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращает состояние; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. JS константное InitialState = {счета: [{название: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} Функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращение состояния ; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. JS константное InitialState = {счета: [{название: "Bitcoin Slash фонда", хэш: "0x83247jfy344fgg"},],} Функция экспорта по умолчанию (состояние = InitialState, действие) {переключатель (action.type) {по умолчанию: возвращение состояния ; }} Когда я перейти к экрану учетных записей, я получаю TypeError ошибка: не определено не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. неопределенная не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо. неопределенная не является функцией (рядом с «... this.props.state.accounts.map ...»); Кредиторская экран, кажется, не на самом деле связано с Redux, и я не могу понять, почему. Есть идеи? Большое спасибо.
Seva
1

голосов
0

ответ
44

Просмотры

Доступ к API Google после того, как реагировать-перевождь-firebase аутентификации

Я использую реагировать-Redux-firebase для проверки подлинности с помощью Google, который прекрасно работает, и я могу просмотреть свой профиль в моих компонентах метод отрисовки через Redux магазин, но я не могу показаться, чтобы получить доступ к токену доступа Google, чтобы использовать в своих создателях действий для доступа к Google в API. Что стандартный способ, чтобы захватить маркер доступа? getFirebase () кажется логичным, но я не могу найти ни одного упоминания лексемы там.
Sam
1

голосов
0

ответ
42

Просмотры

понимание возврата блока в @connect декоратора

Я иду через в реакцию Redux приложения и я наткнулся на @connect декоратора. Тем не менее, я считаю, что в некоторых случаях, есть возвращение используется внутри @connect, что-то вроде этого: @connect (() => {.... возвращение {.....};}) Я не понимать, что это возвращение делать в этом случае?
Arna
1

голосов
1

ответ
211

Просмотры

разорвать ли в этом случае правила Redux и его восстановителей?

Я где-то читал, что в редукторах я никогда не должны изменять состояние, я должен только добавить новые данные в нем следующим образом: вернуть [... состояние, action.payload]; или вот так: вернуть [... состояние, ... action.payload]; Так что в этом modify_favorites_reducer тот случай, CLEAR_FAVORITES законны или это противоречит правилам Redux и философии? импорт {ADD_TO_FAVORITES, INJECT_TO_FAVORITES, CLEAR_FAVORITES} от»../actions'; Функция экспорта по умолчанию (состояние = [], действие) {переключатель (action.type) {случай ADD_TO_FAVORITES: возвращение [... состояние, action.payload]; случай INJECT_TO_FAVORITES: возвращение [... состояние, ... action.payload]; случай CLEAR_FAVORITES: возвращение []; по умолчанию: возвращает состояние; }} Это делает работу, и мой код работает, но я не знаю, если это нормально, чтобы оставить его, как это.
MountainConqueror
1

голосов
1

ответ
42

Просмотры

Реквизит не обновляется, когда действие называется Redux

Только отказ от ответственности - мой код работал, когда я имел проблематичную функцию в моем основном компоненте. После того, как я экспортировал его он перестал вести себя как положено. Моя теория состоит в том, потому что как-то реквизит не обновляется должным образом. Во всяком случае, у меня есть компонент, который после того, как он нажал она начинает прослушивание оконного объекта и устанавливает надлежащий магазин элемент «истинный» и в зависимости от следующего объект щелкнул действует соответствующим образом. После того, как некорректный объект нажат, магазин должен вернуться к ложным, и он, однако подпорки все еще «истинный», как показано на скриншоте ниже. Как я могу решить эту проблему? Может быть, есть способ, что функция может принимать магазин в качестве параметра вместо реквизита? Или им вызов действия inproperly или им полностью хватает чего-то? (? Соответствующие части): Код ниже Основной компонент: импорт Реагировать из «реагировать»; импорт {} соединить с " реагируют-Redux 'импорт {bindActionCreators} от 'перевождь' импорта {Включить} из' '../../actions/inventory импорта {setModalContent, setModalState} от' ../../actions/modal '; импорт inventoryReducer из '../../reducers/inventory'; импорт {chainMechanics} из»./itemMechanics/chainMechanics'; Класс ItemRenderer расширяет React.Component {handleBoltcuttersClicked () {this.props.activate ( 'boltcutters', TRUE); SetTimeout (() => chainMechanics (this.props), 100)} inventoryItemRender () {пусть inventoryItem = NULL; если (this.props.inventory.items.boltcutters) {inventoryItem = this.handleBoltcuttersClicked ()}> Boltcutters} вернуть inventoryItem; } Визуализации () {пусть renderItems = this.inventoryItemRender (); возвращение ({renderItems})}} Const mapStateToProps = (состояние) => {{возвращение уровня: state.level, инвентарь: state.inventory}} Функция mapDispatchToProps (отправка) {// отправка ж возвратная propsach (bindActionCreators ({активировать: активировать, setModalState: setModalState, setModalContent: setModalContent}, отправка))} экспорта по умолчанию подключения (mapStateToProps, mapDispatchToProps) (ItemRenderer); Файл с проблемной функции: импорт {} реактивировать из '' ../../../actions/inventory импорта {setModalContent, setModalState} от '../../../actions/modal'; Функция экспорта chainMechanics (реквизит) {пусть clickedElement; window.onclick = ((е) => {console.log (clickedElement, 'clickedelement', props.inventory. activeItem.boltcutters), если (props.inventory.activeItem.boltcutters === истина) {clickedElement = e.target; если (clickedElement.id === 'chainChainedDoor') {props.activate ( '' boltcutters, ложь); props.setModalContent ( 'Chain_Broken'); props.setModalState (истина); } Иначе, если (clickedElement.id === 'boltcuttersId') {console.log ( 'Foo')} еще {props.activate ( '' boltcutters, ложь); props.setModalContent ( 'Cant_Use'); props.setModalState (истина); console.log ( "props.inventory.activeItem.boltcutters", props.inventory.activeItem.boltcutters); }}})} Мои действия: Const inventoryReducer = (состояние = inventoryDefaultState, действие) => {переключатель (action.type) {случай 'ACTIVE': console.log (действие) возвращение {... состояние, activeItem: {... state.activeItem, [действие .item]: action.isActive}} по умолчанию: возврат состояния; }} Как настроить магазин: экспорт по умолчанию () => {сопз магазин = createStore (combineReducers ({уровень: levelReducer, модальный: modalReducer, инвентарь: inventoryReducer, стили: stylesReducer}), applyMiddleware (санк)) возвращение магазин; } Я считаю, Thats eveyrthing нужен? Если нет, пожалуйста, дайте мне знать, я пытался сделать эту работу в течение длительного времени.
MazMat
1

голосов
1

ответ
594

Просмотры

Как извлечь из сервера на Redux Увлажняет?

Я использую React / Redux и Redux-сохраняется для поддержания локальной устойчивости при хранении. Я ищу для загрузки «appSettings.json» с сервера при перевождь-прежнему не решены закончил Rehydrating магазин с локального хранилища. В методе persistStore есть функция обратного вызова, которая гарантированно придет после того, как магазин был регидратацией, но мне нужно сделать запрос на сервер для извлечения appSettings.json. Есть ли способ, в котором я могу ждать выборки до тех пор, пока сервер не ответит? Я требуется URL API от appSettings.json для того, чтобы совершать звонки API, но звонки из внутри компонентов происходят перед AppSettings выборки вернулся. Const persistor = persistStore (магазин, persistConfig, асинхронный () => {возвращение ждет выборки ( '') settings.json .then (ответ => {возвращение response.json ();}). затем (данные => {console.log (данные); store.dispatch ({тип: "API_BASE_RESPONSE", base_api_url: data.baseApiUrl});})}); Я попробовал несколько различных вариаций в ожидании, но не повезло. Есть, пожалуй, еще лучший способ сделать то, что я пытаюсь добиться?
Dave C
1

голосов
0

ответ
225

Просмотры

как извлечь данные из файла example.json от реакции изоморфных выборок

У меня есть файл item.json в моей среагировать папку проекта, который содержит список элементов. Как загрузить файл и получить дату с помощью изоморфных выборок из среагировать и сортировать данные в обратном алфавитном порядке? Структура папок: | узловые модули | общественный | SRC | App.js | index.js | package.json | item.json
saran
1

голосов
1

ответ
404

Просмотры

Can't convert undefined to object (object.keys() function)

I am trying to iterate through the redux store and render all objects present. In an attempt to create an array of the objects I encounter the following error The relevant code snippet: class VictoryChartComp extends React.Component{ constructor(props) { super(props); //this.ChartsArray = []; this.ChartsArray = Object.keys(this.props.newcharts).map(function (key) { if (this.props.newcharts.type == 'victory') { var item = this.props.newcharts[key]; return item; } }); } The whole code can be found here: https://codesandbox.io/s/xr5wk9v35o I have also tried to declare 'this.ChartsArray' (commented line) but the problem still exists. Any help would be greatly appreciated.
G.Musgrave
1

голосов
0

ответ
88

Просмотры

FieldArray перерегистрация поля после каждого полукокс-входа

Привет Я совершенно новой для React, и я стараюсь, чтобы узнать, как работать с Redux-форм (https://redux-form.com/7.3.0/), и это в основном работает, но я встречая вопрос, который Я не могу решить. Проблема такая же, как этот: https://github.com/erikras/redux-form/issues/2412 этот вопрос в короткие: Всякий раз, когда я пытаюсь написать что-то во входном поле, моя форма постоянно повторно регистрирует поле, которое делает вид практически невозможно работать. Плохое поведение происходит из-за проверки входов. Хотя Marnusw, кажется, решил его с этим комментарием: Каждый раз, когда форма была оказана новый экземпляр MINLENGTH будет создан в результате чего поле для UNREGISTER_FIELD, а затем REGISTER_FIELD снова. Экземпляр MINLENGTH должен быть создан один раз вне функции визуализации: Const minLength6 = MINLENGTH (6) Однако я не подключаю свою проверку на компонент, как он есть, так что я не уверен, как я могу объявить свою проверку за пределами функции визуализации () в моем коде. Я пытался делать: ... (импорт) Const проверки = проверки // объявляя константный и присвоение «Подтвердить» к нему // вместо того, чтобы непосредственно с помощью проверки. MenuInputFields = reduxForm ({форма: «inputItemList», проверка}) (MenuInputFields) Но это отключена проверка ALLtogether, что (разумеется) также решает проблему, но это не является решением проблемы, так как мне нужно, чтобы подтвердить ввод данных. Мой компонент: импорт React, {Компонент} из 'реагировать' импорт {подключения} от 'реагировать-Redux' импорта {reduxForm, поля, FieldArray} от 'перевождь-форма' импорта {menuSelector} от».. / Редукторы / menuViewReducer 'импорт {postMenuRequest} из' 'импорта Validate из' ../sagas/adminMenuSaga ./validateForm»сопзЬ mapDispatchToProps = (отправка) => {{возвращение SubmitForm: (newMenu) => отправка (postMenuRequest (newMenu) )}} экспорт класса MenuInputFields расширяет React.Component {конструктор (реквизит) {супер (реквизит)} оказывать () {пусть CurrentDate = новый Date () пусть formattedDate = currentDate.toLocaleDateString ( 'ан-GB') Const renderField = ({ вход, метка, тип, имя класса, мета: {трогали, ошибка}}) => ({прикоснулся && && ошибок {ошибки}}); Const renderMenuItem = ({поля, мета: {трогали, ошибка, submitFailed}}) => ({fields.map ((MenuItem, индекс) => ({Индекс + 1} - fields.remove (индекс)} = имя класса 'БТН БТН-умолчанию БТН-хз remItemRow'> Fjern))} fields.push ({})} = имя класса 'БТН БТН-умолчанию БТН-см addItemRow '> Tilføj {submitFailed && && ошибок {ошибки}}); Const {handleSubmit, нетронутый, сброс, представление, SubmitForm} = this.props возвращения (Dato: {formattedDate} Lukketid: тест (MenuItem.Description) || ! EmptyTextInput.test (MenuItem.Description)) {MenuItemErrors.Description = requiredErrText MenuItemsArrayErrors [MenuItemIndex] = MenuItemErrors} еще если (! MenuItem ||! MenuItem.Price ||! SpecialCharsTextInput.test (MenuItem.Price) ||! EmptyTextInput. тест (MenuItem.Price)) {MenuItemErrors.Price = requiredErrText MenuItemsArrayErrors [MenuItemIndex] = MenuItemErrors}}), если (MenuItemsArrayErrors.length) {errors.MenuItems = MenuItemsArrayErrors}}} возвращать ошибки экспорта по умолчанию Validate Цена) || ! EmptyTextInput.test (MenuItem.Price)) {MenuItemErrors.Price = requiredErrText MenuItemsArrayErrors [MenuItemIndex] = MenuItemErrors}}), если (MenuItemsArrayErrors.length) {errors.MenuItems = MenuItemsArrayErrors}}} возвращать ошибки экспорта по умолчанию Validate Цена) || ! EmptyTextInput.test (MenuItem.Price)) {MenuItemErrors.Price = requiredErrText MenuItemsArrayErrors [MenuItemIndex] = MenuItemErrors}}), если (MenuItemsArrayErrors.length) {errors.MenuItems = MenuItemsArrayErrors}}} возвращать ошибки экспорта по умолчанию Validate
BaconPancakes
1

голосов
1

ответ
258

Просмотры

Как получить доступ к стоимости формы в Redux отправки?

У меня есть следующий вид компонента: экспорт класс LoginPage расширяет React.PureComponent {визуализации () {возвращение (Submit); }} Просто после того, как компонент, у меня есть функция mapDispatchToProps: функция экспорта mapDispatchToProps (отправка) {возвращение {onSubmitForm: (ЭВТ) => {// Мне нужно получить доступ к `username` собственности здесь, чтобы передать его в качестве аргумента. отправка (postUsername (имя пользователя)); }}; } Мне нужно получить доступ к имени пользователя внутри функции mapDispatchToProps. Что это самый простой способ сделать это? Мне не нужно, чтобы сохранить имя пользователя на этом шаге. Спасибо.
isar
1

голосов
0

ответ
64

Просмотры

Нет методов компонента не вызывался, когда возвращаться к нему (реагируют родной) [дублировать]

Этот вопрос уже есть ответ здесь: Pass реквизита от ребенка к родителю реагировать навигации 1 ответ Реагировать навигации GoBack () и обновление родительского состояния 6 ответил я использую реагировать родной (версия: 0.52.2) вместе с Redux и реагировать-навигации (версия: 1.5.6). Я 2 экрана, как А и В. Когда я перейти от А к В, а затем вернуться к А раз, где я должен обрабатывать любые события (например, апи вызова или изменения состояния) в? Я ожидал, что любой метод, жизненный цикл А, чтобы получить вызывается, когда возвращаясь к А, но ничего не называют по реакции родной.
Shubham
1

голосов
1

ответ
192

Просмотры

Поток типирование с bindActionCreators не работает на mapDispatchToProps

Вот мое определение отправки реквизита: DispatchProps типа = {selectRow: (индекс: номер) => недействительный, LoadData: (fetchArgs: FetchArgs) => недействительный,}; // Это работает константный mapDispatchToProps = (отправка: отправка): DispatchProps => ({selectRow: (selectedRowIndex: номер) => отправка (actions.selectRow (selectedRowIndex)), LoadData: (fetchArgs: FetchArgs) => отправка (действия. LoadData (fetchArgs)),}); // Это не работает константный mapDispatchToProps = (отправка: отправка): DispatchProps => bindActionCreators ({selectRow: actions.selectRow, LoadData: actions.loadData}, отправка); Поток сетует о том, что: SelectRowAction [1] несовместим с неопределенным [2] в возвращаемом значении имущества `selectRow`. Это' s как если определение типа bindActionCreator пытается вернуть создатель действий возвращает значение (в данном случае, SelectRowAction), но это не имеет никакого смысла, так как эти значения передаются для отправки и отправки должны возвращаться неопределенными. Что мне не хватает?
1

голосов
0

ответ
45

Просмотры

Как я могу говорить между более чем одним редукторами в Redux?

Я нашел это, когда я искать мою проблему на github.com реагировать-Redux-documentry, но я не могу в состоянии иметь смысл. Const редукторы = [reducerA, reducerB, ..., reducerZ]; пусть редуктор = (состояние = InitialState, действие) => {возвращение reducers.reduce ((состояние, reducerFn) => (reducerFn (состояние, действие)), состояние); }; если я использовать это в качестве редуктора (myinitialState, MyAction); то он будет давать только восстановители из массива редуктора, но как я могу говорить между этими редукторами?
B4BIPIN
1

голосов
2

ответ
762

Просмотры

почему он показывает ошибку «Не удается прочитать свойство„иметь“неопределенных»?

Я пытаюсь проверить мой компонент с помощью enzyme.Could вы скажите, пожалуйста, почему я получаю ошибку «Не удается прочитать свойство„иметь“неопределенный» вот мой код https://codesandbox.io/s/oq7kwzrnj5 импорт Реагировать из «реагировать «; импорта {мелкой, монтаж} из «фермента»; импорт счетчика от «./Counter»; описывают ( "счетчик", () => {это ( "тест truty", () => {Const обертка = неглубоко (); ожидать (wrapper.find ( "р")) to.have.length (1). ;});});
naveen
1

голосов
0

ответ
23

Просмотры

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

У меня есть функция запроса, который возвращает обещание. response.json (). Моя проблема заключается в том, что, хотя он решает, но моя функция LoadData не продолжается мимо моего звонка. экспорт функция * LoadData () {console.log ( "Сага: Загрузка данных ..."); попытаться {Const ответ = выход вызова (запрос, requestURL, {метод: 'GET', учетные данные: 'включить', заголовки: { 'Content-Type': 'приложения / JSON',}}); // Ничего мимо этой точки не всегда прикоснулся :( если (response.success) {console.log ( "УСПЕХ !!!!"); ... Функция экспорта по умолчанию запроса (URL, параметры) {возвращение выборки (URL, параметры ) .then (checkStatus) .then (parseJSON);} checkStatus подтверждает успешное состояние на функции данных parseJSON (ответ) {если (response.status === 204 === || response.status 205) {возвращение нуль; } Вар responseClone = response.clone (); console.log (responseClone.json ()); вернуть response.json (); } Когда я запускаю его, консоль выводит следующее. Подтвердив, что мое обещание разрешения с данными, которые я хочу. Но код еще не продолжается. Только делает один раз каждые 50 или около попыток. SAGA: Загрузка данных ... [[PromiseStatus]]: "разрешен" [[PromiseValue]]: Object
Danny
1

голосов
0

ответ
124

Просмотры

Реагировать, Redux. перевод текста

В настоящее время я работаю над Реагировать приложение и мне нужно реализовать перевод внутри него. https://www.npmjs.com/package/react-redux-i18n Я использую эту библиотеку, чтобы добиться перевода. Я также с помощью функциональных компонентов с библиотекой создания письма, так что мне нужно использовать Перевести компонент вместо i18n.t функции. Однако я столкнулась с проблемой, что я не могу перевести заполнители внутри функционального компонента. Перевести компонент возвращает объект вместо текста и функции i18n.t не засавить на обновлении компонентов. Может кто-нибудь помочь мне, пожалуйста, и скажите, как я могу добиться перевода заполнителей с этой библиотекой?
Andrey
1

голосов
1

ответ
72

Просмотры

Redux-Becon trackeCommProduct не запуская оплаченный запрос [перевождь-маяк]

Следующий код создает действительное событие в журналах перевождь-маяка. Я могу видеть объект получать созданный соответствующим образом и исполняемый код. У меня есть мои аналитики настроить на глобальном уровне для поддержки электронной коммерции: га ( «создать», window.gaKey, «авто»); га ( 'требуют', 'ес'); Тем не менее, не собирают запрос фактически не увольняют в GA. У меня та же проблема с trackEcommAction. Все коллекции TrackEvent проходят правильно. Какого черта? случай BookingActions.TRACK_BOOK_NOW_ECOMM_PRODUCT: возвращение trackEcommProduct ((eAction, ePrevState) => {сопз {confirmation_token, ценообразование, продвижение,} = eAction.payload; Const {общего} = ценообразование; возврат {категория: 'создать резервации', купон: продвижение , ID: confirmation_token, имя: ePrevState.bookingReducer.activeBooking.pickupLocation.multi_car_display_name, цена: всего, количество: 1}; });
Thomas D. Tucker
1

голосов
1

ответ
138

Просмотры

Реагировать Redux Действие Creator диспетчерский выпуск с Fetch API и Promise

Я пишу действия создателя в реакции приложения. где, когда я сделать некоторые апи вызов мне нужно, чтобы показать Progress Loader на экране. Таким образом, мое действие создатель выглядит следующим образом. экспорт Const fetchData = (ActionType, пары) => (отправка) => {отправка (Action (ActionConstants.SHOW_PROGRESS_LOADER)); // Показать Loader Действие возврата fetchDataRequest (ActionType, пары) // Здесь Fetch Api вызова .then (responseData => {отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); отправка (Action (RECD (ActionType) {данные: responseData, receivedAt:. Date.now ()}));}) задвижка ((ошибка) => {отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); // Скрыть грузчика Action}); }; Когда я пишу этот кусок кода его работа, как ожидается, я диспетчерская действие как отправка (fetchData (данные)) из компонента и я могу показать загрузчик в моем родительском компоненте. То, что я понимаю, выборка возвращает мне обещание. После того, как выборка будет завершена, то я прячусь загрузчик, который работает, как ожидалось. Теперь Существует сценарий, где в мне нужно сделать некоторые проверки, где в я не должен делать какую-либо апи вызов, но все проверки выполняются локально. Вот и я хочу сделать то же самое, как мне нужно, чтобы показать загрузчик в моем родительском компоненте, а когда все проверки сделаны, мне нужно, чтобы скрыть загрузчик. Я написал один и тот же кусок кода, даже действия вызывалось, но моя визуализация функция не вызывалось. Мой код выглядит следующим образом: // Это мое действие творец, который на самом деле будет делать экспорт проверки сопзЬ validateAndSaveData = () => {возвращение ((отправка, GetState) => {вернуть новый Promise ((решительность, отклонять) => {пусть saveRecommendDetailsFlag = истина; // здесь я dispacthing какие-то действия и хранения данных в моем магазине saveRecommendDetailsFlag = canSaveData (GetState ()); если (saveRecommendDetailsFlag) { разрешения ( 'УСПЕХ');} еще {отклонять ( 'ERROR');}}); }); }; И есть еще одна акция творца, который я зову его из пользовательского интерфейса от компонента, который будет первым инициировать действие шоу загрузчика, а затем выполнить проверку и на основании результата проверки я должен скрывать загрузчик. экспорт Const SaveData = () => {возвращение ((отправка) => {отправка (Action (ActionConstants.SHOW_PROGRESS_LOADER)); // Показать Loader Действие возврата диспетчерская (validateAndSaveData ()) .then (() => {// Здесь им диспетчерские действия, чтобы сделать больше некоторой обработку. отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); // Скрыть Loader Действие}) .catch (() => {отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); // Скрыть грузчика Action}); }); }; Все работает нормально, но мой загрузчик не приходит на экране. я не в состоянии понять это, где я делаю неправильно. Можно ли предложить что-то, как я могу решить эту проблему? Я получил некоторые обходной путь, используя SetTimeout FUNC, но я не думаю, что это правильный подход. экспорт Const SaveData = () => {возвращение ((отправка) => {отправка (Action (ActionConstants.SHOW_PROGRESS_LOADER)); // Показать Loader Действие SetTimeout (() => возврат отправка (validateAndSaveData ()) .then (() => {// Здесь им диспетчерские действия, чтобы сделать больше некоторой обработку. отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); // Скрыть Loader Действие}) .catch (() => {отправка (Action (ActionConstants.HIDE_PROGRESS_LOADER)); // Скрыть грузчика Action}); }, 10); }); };
user3184134
1

голосов
1

ответ
379

Просмотры

Как инициализировать Redux-формы со значениями из магазина

Я пытаюсь загрузить форму Redux предварительно заполненную со значениями из магазина. В настоящее время, я могу заполнить Redux формы с данными непосредственно из редуктора, но при подаче формы она принимает только данные для интерактивных элементов для генерации полезной нагрузки. Тем не менее, я могу получить данные от редуктора до магазина. Мне нужно, чтобы инициализировать форму Redux со значениями магазина. Есть ли лучший подход для инициализации элементов формы со значениями из магазина и представить всю модель в качестве полезной нагрузки? Я прилагаю Redux-формы при этом. Redux Форма: - импорт Реагировать из «реагировать»; импорта {} соединить с 'среагировать-Redux'; импорта {поле, reduxForm} от 'перевождь-формы'; пусть InitializeFromStateForm = реквизит => {сопз {handleSubmit, нетронутые, сброс, представление} = реквизит; возвращение ({/ * нагрузка (данные)}> Load Account * /} Имя Фамилия Отправить Отменить изменения); }; // Украсить reduxForm (). Это будет читать initialValues ​​проп обеспечивается Connect () InitializeFromStateForm = reduxForm ({форма: 'initializeFromState', // уникальный идентификатор для этой формы}) (InitializeFromStateForm); // Вы должны подключить () к любым редукторами, которые вы хотите подключить к себе InitializeFromStateForm = подключающихся (State => ({initialValues: { 'First_name': 'Sunil', 'Last_name': 'Чудхари'}, // тянуть начальные значения от счета редукторе}) // {нагрузка: loadAccount}, // Создатель связывать счет загрузки действия) (InitializeFromStateForm); экспорта по умолчанию InitializeFromStateForm;
bikash sahu
1

голосов
0

ответ
50

Просмотры

Как украсить экспорта componenet с помощью reduxForm если withStyles HOC вызывается togeteher?

Я хочу, чтобы украсить свой компонент с reduxForm, но функция withStyles вызывается. Как я могу украсить? Const mapStateToProps = состояние => ({кратко: state.dashboard.summary}) константное mapDispatchToProps = отправка => bindActionCreators ({dashboardList}, отправка) экспорт по умолчанию подключение (mapStateToProps, mapDispatchToProps) (Dashboard); экспорт по умолчанию withStyles (dashboardStyle) (Dashboard); (здесь !! Как я могу это сделать ???)
1

голосов
1

ответ
54

Просмотры

Redux-форма загрузки компонента из другого файла замораживает загрузку

Когда я пытаюсь импортировать поля из внешнего файла, замерзает страница (берет навсегда, чтобы загрузить). Я думаю, что проблема является компонентом = {SurveyField}, потому что если я код компонента = «вход» вместо этого, он работает. Но я действительно хочу, чтобы импортировать форму из-за пределов. Заранее спасибо за помощь! импорта React, {Компонент} из "реагируют"; импорт {reduxForm, поле} из "перевождь-формы"; импорт SurveyField из "./SurveyForm"; Класс SurveyForm расширяет компонент {renderFields = () => {возврата; }; рендеринга () {возвращение (console.log (значения))}> Submit); }} Экспорта по умолчанию reduxForm ({форма: "surveyForm"}) (SurveyForm); Это импорт SurveyField.js Реагировать из «реагировать»; Const SurveyField = () => {возврата; };
user9763166
1

голосов
1

ответ
40

Просмотры

Реагировать маршрутизатор не делает компонент изначально

Это странно для меня. Я начинаю мое приложение на местном уровне. У меня есть только заголовок и TaskPage в моем приложении, как так. импорта React, {Компонент} от 'реагируют'; импорт {withRouter} от 'реагируют-маршрутизатор-DOM'; импорта {} соединить с 'среагировать-Redux'; импорт заголовок из «../components/header»; импорт TasksPage из»../pages/tasks'; импорта {} маршрута от «реагируют-маршрутизатор»; Класс App расширяет компонент {визуализации () {возвращение (); }} Экспорта по умолчанию withRouter (подключение () (App)); И тогда мой маршрутизатор материал. импорт»./views/styles/styles.css'; импорт React из 'реагируют'; импорт ReactDOM из «реагируют-дом»; импорта {} Провайдер от 'среагировать-Redux'; импорт {ConnectedRouter} от ' реагируют-маршрутизатор-Redux '; импортировать историю из «./history»; импорт configureStore из './store'; импорт registerServiceWorker из './utils/register-service-worker'; импорт App из './views/app'; импорт TaskPage из магазина сопзЬ»./views/pages/tasks' = configureStore (); Const RootElement = document.getElementById ( 'корень'); Функция визуализации (Компонент) {console.log ( 'КОМПОНЕНТ ::', компонентный); ReactDOM.render (, RootElement); } Если (module.hot) {module.hot.accept ( './ просмотров / приложение', () => {визуализации (требуется ( './ мнения / приложение') по умолчанию);.})} RegisterServiceWorker (); Сначала я получаю пустую страницу. Но если бы я внести изменения в странице App и сохранить его в то время как приложение работает, как только пространство или возвращение линии, то незначительного, я получаю мою страницу задач внезапно. Он отлично работает тогда. У меня нет никаких ошибок в моей консоли в любой момент во время этого процесса, так что я думаю, что я что-то не так с моей маршрутизацией где-то, когда приложение изначально загружается. Или, может быть, что-то делать с этим TaskPage. импорта React, {Компонент} от 'реагируют'; импорт {Список} из «неизменных»; импорт PropTypes из «проп-типов»; импорта {} соединить с 'среагировать-Redux'; импорт {withRouter} от 'реагируют-маршрутизатор-DOM'; импорт {createSelector} от 'Reselect'; импорт {getTaskFilter, getVisibleTasks, tasksActions} из 'Src / задачи'; импорт TaskFilters из»../../components/task-filters'; импорт TaskForm из '../../components/task-form'; импорт TaskList из '../../components/task-list'; экспорт класс TasksPage расширяет компонент {статический propTypes = {CreateTask: PropTypes.func.isRequired, filterTasks: PropTypes.func.isRequired, FilterType: PropTypes.string.isRequired, loadTasks: PropTypes.func.isRequired, местоположение: PropTypes.object.isRequired, removeTask: PropTypes.func.isRequired, задачи: PropTypes.instanceOf (Список) .isRequired, updateTask: PropTypes.func.isRequired}; componentWillMount () {this.props.loadTasks (); this.props.filterTasks (this.getFilterParam (this.props.location.search)); } ComponentWillReceiveProps (nextProps) {если (== nextProps.location.search this.props.location.search!) {This.props.filterTasks (this.getFilterParam (nextProps.location.search)); }} componentWillUnmount () {// this.props.unloadTasks (); } GetFilterParam (поиск) {константный PARAMS = новые URLSearchParams (поиск); вернуть params.get ( 'фильтр'); } Визуализации () {возвращение (); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage)); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage)); }} // ===================================== // CONNECT // ---- --------------------------------- Const mapStateToProps = createSelector (getTaskFilter, getVisibleTasks, (FilterType, задачи) => ( {FilterType, задачи})); Const mapDispatchToProps = Object.assign ({}, tasksActions); экспорта по умолчанию withRouter (подключение (mapStateToProps, mapDispatchToProps) (TasksPage));
Puerto
1

голосов
1

ответ
63

Просмотры

Redux-ORM связь ограничения на рассылку

Пытаясь понять Redux-ОРМ. Читал на и https://github.com/tommikaikkonen/redux-orm и http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ У меня есть два класса Автор и книги Теперь, когда я направить CREATE_AUTHOR действие детали создания автор так же я послать еще одно действие с типом CREATE_BOOK добавляющих деталей книги. Теперь, как я связать Автор и связанную с ним книгу? или если я создаю книгу первый, как я добавить его автор?
user581157
1

голосов
1

ответ
96

Просмотры

Восстановление прежнего состояния в Redux при переходе назад в истории с React-маршрутизатор

У меня есть React / Redux приложение, которое использует React-маршрутизатор. Приложение имеет область поиска, которые давайте искать пользователей по пунктам. Есть ~ 200 пунктов, поэтому они предварительно загружаются при запуске приложения. Поиск только фильтрует эти элементы, не делая какие-либо дополнительные запросы к серверу. Когда пользователь нажимает на одну из деталей, маршрутизатор переходит к деталям этого элемента. Есть ли лучший ™ / общий / универсальный способ я могу сохранить результаты и положение прокрутки и, если пользователь нажимает на ВЕРНУТЬСЯ в детальном просмотре восстановить их?
alexandernst
1

голосов
0

ответ
90

Просмотры

mapStateToProps is undefined

I want to fetch data from json file and then render it on the screen with React and Redux. JSX is standart, I used the tag and set store value to my store. mapStateToProps is going undefined for this.props as well as toTakeData(). Here I have action file with request: let data = { loading: true, items: [], prevName: null, selectedProfile: '', term: '' } export function getItems() { getRequest(); return { type: 'GET_ITEMS', payload: data } } const getRequest = async () => { const response = await fetch('http://localhost:8000/api/item') .then( response => response.json() ) .then( json => { data.items = json; data.selectedProfile = json[0]; data.loading = false; data.prevName = json[0].general.firstName + ' ' + json[0].general.lastName; } ) .catch( err => console.error( err ) ); } And here is component file which suppose to render data: const mapStateToProps = state => { console.log(state.items); return { items: state.items, prevName: state.prevName, selectedProfile: state.selectedProfile, term: state.term, loading: state.loading }; }; const mapActionsToProps = { toTakeData: getItems }; export default connect(mapStateToProps, mapActionsToProps)(SelectMenu);
howHighUR
1

голосов
1

ответ
280

Просмотры

почему перевождите-форум с реагировать родной не посылать запрос POST?

{ Я бы } } } } }); импорт store.js React, {Компонент} от 'реагируют'; импорт {applyMiddleware, createStore, сочиняют} из 'Redux'; импорт {} из форума '@ перевождь-форум / Redux-в автономном режиме'; импорт offlineConfig от @ перевождь-форум / перевождите-форум / Lib / по умолчанию '; импорта {} Провайдер от 'среагировать-Redux'; импорт регистратор из «Redux-регистратор»; импортировать RootNavigator из "./config/routes"; импортные редукторы от // магазина сопзЬ промежуточного слоя»./reducers' = []; если (process.env.NODE_ENV === 'развитие') {middleware.push (регистратор); } Const магазин = createStore (редукторы, неопределен, составляют (applyMiddleware (... промежуточного слоя), в автономном режиме (offlineConfig)));
user1080247
1

голосов
2

ответ
50

Просмотры

отправка Connect не работает реагировать родной

nativeusingreact-перевождь, реагируют-handleActionswithducks, преобразователь, structure` и пытается разослать функцию действия, чтобы изменить состояние. Он работал на самом деле до этого утра, но это больше не работает. Я понятия не имею, что я изменился. Еще хуже, я не совершал, потому что этот проект для практикующих реагируют родные, так что я не могу отменить свою работу. Если я прав, что я правильно понял, то отправка Connect в контейнер компонента должен вызвать fetchName () в categoryImgListMod.js (действие). Тем не менее, я думаю, отправка не работает здесь. Так государство никогда не меняется. Если вы дадите мне какой-нибудь совет, было бы очень полезно для меня, и я был бы признателен вам. Вот мой код categoryListContainer.js импортируют React, {Компонент} из «среагировать»; импорт {View} из «реагировать родной»; импорта {} соединить с 'среагировать-Redux'; импорт CategoryImgList из '../components/categoryImgList'; импорт * в CategoryImgActions из '../store/modules/categoryImgListMod'; Класс CategoryImgListContainer расширяет Компонент {loadNames = асинхр () => {console.log (this.props); Const {CategoryImgActions} = this.props; попробуйте {ждать CategoryImgActions.fetchName (); } Поймать (е) {console.log (е); }} Визуализации () {сопз {контейнер} = стили; константный {loadNames} = это; вернуть ( ); }} Const стили = {контейнер: {высота: '100%'}} экспорта по умолчанию подключения (({categoryImgListMod}) => ({имя: categoryImgListMod.name}), (отправка) => ({fetchName: () = > {отправка (CategoryImgActions.fetchName ())}})) (CategoryImgListContainer); categoryImgListMod.js импорт {handleActions} из 'Redux-акций'; // Firestore импорт * в качестве БД из '../../shared'; // Типы действий Const GET_CATEGORY_NAME_PENDING = 'categoryImgList / GET_CATEGORY_NAME_PENDING'; Const GET_CATEGORY_NAME_SUCCESS = 'categoryImgList / GET_CATEGORY_NAME_SUCCESS'; Const GET_CATEGORY_NAME_FAILURE = 'categoryImgList / GET_CATEGORY_NAME_FAILURE'; // действие экспорт создатель Const fetchName = () => асинхронного (отправка) => {отправка ({типа: GET_CATEGORY_NAME_PENDING}); попробовать {Const ответ = ждут db.getCategoryNames (); Const обр = []; response.docs.forEach (Рез => {arr.push (res.id);}); отправка ({типа: GET_CATEGORY_NAME_SUCCESS, полезная нагрузка: обр}); вернуться обр; } Поймать (е) {console.log (е); отправка ({типа: GET_CATEGORY_NAME_FAILURE, Полезная нагрузка: е}); }} Const InitialState = {выборка: ложь, ошибка: ложь, имя: []}; // Редуктор экспорта по умолчанию handleActions ({[GET_CATEGORY_NAME_PENDING]: (состояние) => ({... состояние, выборка: правда, ошибка: ложь}), [GET_CATEGORY_NAME_SUCCESS]: (состояние, действие) => ({... состояние, выборка: ложь, имя: action.payload}), [GET_CATEGORY_NAME_FAILURE]: (состояние) => ({... состояние, выборка: ложь, ошибка: истинный})}, InitialState);
Mingyu Jeon
1

голосов
0

ответ
72

Просмотры

Реагировать JS: FirebaseUI AUTH живучесть работает на Firefox Mobile не Chrome Mobile

Я использую реагировать и перевождь и FirebaseUI ведет себя в странных отношениях он прекрасно работает в настольных Все браузеры Mobile (протестировано с несколькими телефонами Android) - Firefox и Opera, но не в Chrome Когда я войти с FirebaseUI, он входит в систему и выходит из самого следующий момент я понятия не имею, что происходит, я проверить Auth очень рядом с самого первого индексного файла App.js componentWillMount = () => {{константные реквизита} = этой console.log ( «» идентификатор пользователя, props.userid); this.unsubscribeAuthListener = auth.onAuthStateChanged ((пользователь) => {если (пользователь) {// Сохранение пользовательских данных в Redux магазине и установить состояние аутентификации как истинный store.dispatch (для входа в аккаунт (пользователь)) Const = user.uid.toString Идентификатор_пользователя () {// ....... Прослушайте Firestore документ для изменения документа}} еще {// Установить состояние аутентификации в Redux к ложному магазину. отправка (SignOut ())}}); // Получаем местонахождение (город) пользователя this.ipLookUp ()} componentWillUnmount = () => {this.unsubscribeAuthListener (); } Визуализация () {возвращение ()} LoginPage.js - получает props.isauthed из другого файла, в котором перевождь отправляет его класс LoginPage расширяет React.Component {конструктор (реквизит) {супер (реквизит); } // Настройка FirebaseUI. uiConfig = {// Всплывающее потока, а для входа в аккаунт, чем перенаправить поток. signInFlow: 'всплывающего окна', // Мы будем показывать Google и Facebook, как AUTH поставщиков. signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID, {Поставщик: firebase.auth.GoogleAuthProvider.PROVIDER_ID, оптические прицелы: [ 'https://www.googleapis.com/auth/plus.login', «https: // WWW. googleapis.com/auth/user.birthday.read», 'https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/user.emails.read' ,], customParameters: {// Forces счет выбора, даже если один аккаунт // доступен. подскажите: 'select_account'}}, {Поставщик: firebase.auth.FacebookAuthProvider.PROVIDER_ID, Области применения: [ 'public_profile', 'электронная почта', 'user_likes', 'user_friends', 'user_birthday']},], обратные вызовы: {signInSuccessWithAuthResult: функция асинхронной (authResult, redirectUrl) {console.log ( '~~~~~~~~~~~~~~~ ______ AuthResult ________ ~~~~~~~~~~~~', authResult) store.dispatch (AddBasicData (authResult))}, // Избегайте перенаправления после входа в систему. signInSuccess: () => ложный}}; визуализации () {console.log ( 'Проверка Если Реквизит Изменение Рендер', this.props.isauthed), если (this.props.isauthed!) {возвращение (My App Пожалуйста, войдите в систему:); } Возвращение (Пользователь Подпись IN)}} экспорта по умолчанию LoginPage; это потому, что Chrome активно удалять кэш, чтобы сохранить память isauthed) {возвращение (My App Пожалуйста, войдите в систему:); } Возвращение (Пользователь Подпись IN)}} экспорта по умолчанию LoginPage; это потому, что Chrome активно удалять кэш, чтобы сохранить память isauthed) {возвращение (My App Пожалуйста, войдите в систему:); } Возвращение (Пользователь Подпись IN)}} экспорта по умолчанию LoginPage; это потому, что Chrome активно удалять кэш, чтобы сохранить память
Aditya Srinivas
1

голосов
0

ответ
523

Просмотры

NPM запустить строить elifecycle код ошибки - не может выяснить вопрос

Я строю свой первый сайт и начал с шаблоном среагировать от кого-то другого. Развивать локально на компьютере Windows, я использовал «старт НПМ», который был в порядке. Теперь я пытаюсь развернуть на моей машине Linux, но я просто получаю белую страницу и мои реагировать JS файлы не загружаются. Я сейчас пытаюсь с «NPM выполнения сборки», который запускает производство конфигурации (который я не писал), и это бросает ошибку, я не могу понять. Ниже вся соответствующая информация у меня есть. Кто-нибудь есть идеи, что это может быть? Я потратил часы и часы, пытаясь понять это. Я попытался обновить НПМ, переустановка узлов модулей, используя режим администратора и так далее. Проблема происходит на обоих моих окнах и машине Linux при использовании «НПМ запуска сборки». Любые предложения, пожалуйста? Ошибка командной строки на LINUX ERROR в bundle2. JS от присвоения UglifyJs Invalid [bundle2.js: 15571,30]? Ребенок приточно-текст-WebPack-плагин node_modules / экстракт текста WebPack-плагин / DIST node_modules / KSS-погрузчик / index.js sourceMap & localIdentName = [местных] ___ [ хэш: base64: 5] node_modules / дерзость-погрузчик / Библиотека / loader.js outputStyle = расширенное приложение / стилей / index.scss:! [0] ./node_modules/css-loader?sourceMap&localIdentName=[local]___[hash : base64: 5] ./ node_modules / дерзость-погрузчик / Библиотека / loader.js outputStyle = расширенные ./ приложения / стили / index.scss 2,86 кБ {0} [встроенный] завод:! 13 мс здание: 8255ms = 8268ms + 1 скрытый модуль НПМ ERR! Linux 2.6.32-696.23.1.el6.x86_64 НОЙ ERR! ARGV "/ USR / бен / узел" "/ USR / бен / НМП" "запустить" "построить" NPM ERR! узел v6.14.1 НПМ ERR! NPM v3.10.10 НПМ ERR! Код ELIFECYCLE НПМ ERR! [email protected] сборки: `WebPack --config webpack.production. config.js --progress --profile --colors` НПМ ERR! Статус выхода 2 NPM ERR! NPM ERR! Ошибка при [email protected] сценария сборки 'WebPack --config webpack.production.config.js --progress --profile --colors'. NPM ERR! Убедитесь, что у вас есть последняя версия Node.js и НПМ установлены. NPM ERR! Если да, то это, скорее всего, проблема с CB-реагировать-Redux пакет, НПМ ERR! не с самого НПМ. NPM ERR! Скажите автор, что это терпит неудачу на вашей системе: НАЯ ERR! WebPack --config webpack.production.config.js --progress --profile --colors НПМ ERR! Вы можете получить информацию о том, как открыть вопрос для этого проекта с: НОЙ ERR! НАЯ ошибка центибар реагирует-перевожди НУЮ ERR! Или, если это не доступно, вы можете получить информацию о них через: НУЮ ERR! NPM владелец Ls центибар реагирующий-перевожди НУЮ ERR! Существует вероятность дополнительный выход каротаж выше. NPM ERR! Пожалуйста, включите следующий файл с любым запросом поддержки: НАЯ ERR! /home/psmet/piettest/npm-debug.log Debug лог файлов из WINDOWS 1 многословные кли [ 'C: \\ Program Files \\ nodejs \\ node.exe', 1 VERBOSE «CLI C: \\ Users \\ psmet \\ AppData \\ Roaming \\ НПМ \\ node_modules \\ НПМ \\ бен \\ npm- cli.js', 1 VERBOSE 'CLI бежать', 1 VERBOSE 'сборки CLI'] 2 Информация с использованием [email protected] 3 Информация о использовании [email protected] 4 многословным выполнения сценария [ 'prebuild', 'сборки', 'postbuild'] 5 Информация о жизненном цикле [email protected]~prebuild: [email protected] 6 Информация Жизненный цикл [email protected]~build: [email protected] 7 многословным жизненный цикл [email protected]~build: небезопасный-завивка в жизненном цикле истинный 8 многословным жизненный цикл центибар реагируют [email protected]~build ПУТЬ: С: 10 глупо жизненный цикл 'WebPack --config webpack.production.config.js --progress --profile --colors'] 11 глупо Жизненный цикл [email protected]~build: Возвращается: Код: 2 сигнала: нуль-12 Информация Жизненный цикл [email protected]~build: Не удалось EXEC сценарий сборки 13 многословный Ошибка стека: [email protected] сборки: `WebPack --config webpack.production.config.js --progress --profile --colors` 13 многословным стек Выход состояния 2 13 многословный стек на EventEmitter. (C: \ Users \ psmet \ AppData \ Roaming \ NPM \ node_modules \ NPM \ node_modules \ NPM-жизненный цикл \ index.js: 304: 16) 13 многословным стека на emitTwo (events.js: 126: 13) 13 многословным стека в EventEmitter.emit (events.js: 214: 7) 13 многословным стека на ChildProcess. (C: \ Users \ psmet \ AppData \ Roaming \ NPM \ node_modules \ NPM \ node_modules \ НПМ-жизненным циклом \ Lib \ spawn.js: 55: 14) 13 многословным стека на emitTwo (events.js: 126: вар путь = требуется ( «путь»); вар погрузчики = требуется (»./ webpack.loaders'); вар HtmlWebpackPlugin = требуется ( 'HTML-WebPack-плагин'); вар WebpackCleanupPlugin = требуется ( 'WebPack-очистка-плагин'); вар ExtractTextPlugin = требуется ( 'Extract-текст-WebPack-плагин'); loaders.push ({тест: /\.scss$/, погрузчик: ExtractTextPlugin.extract ({запасной вариант: 'стиль-погрузчик', использование: «CSS-погрузчик sourceMap & localIdentName = [местных] ___ [Хеш: base64: 5]! Сасс-погрузчик outputStyle = расширенные '}), исключающие: [' node_modules']});? module.exports = {запись: [ './app/src/index.jsx', './app/styles/index.scss'], выход: {publicPath:' ./», путь: path.join (__ имя_директории , 'общественность'), имя файла: 'bundle2.js'}, постановляю: {расширений: [ '.js',' .jsx ']}, модуль: {} погрузчики, плагинов: [новый WebpackCleanupPlugin (), новый webpack.DefinePlugin ({ 'process.env': {NODE_ENV: 'Производство "'}}), новый webpack.optimize.UglifyJsPlugin ({сжатия: {предупреждения ложь, screw_ie8: правда, drop_console: правда, drop_debugger: истинно}}), новый webpack.optimize.OccurrenceOrderPlugin (), новый ExtractTextPlugin ({имя файла: 'style.css', allChunks: истинные)},]}; package.json (как выигрыш / Linux) { "имя": "Си-Би-реагировать-Redux", "вариант": "0.1.0", "описание": "Реагировать Webpack Babel Starter Kit", "главный":» «», "скрипты": { "строить": "WebPack --config webpack.production.config.js --progress --profile --colors", "старт": : "^ 2.9.4"}, "Шутка": { "многословный": правда, "под залог": правда, "collectCoverage": правда, "coverageDirectory": "охват", "moduleNameMapper":. { «\\ ( ? JPE г | PNG | GIF | СРВ | OTF | WebP | SVG | TTF | woff2 | тр [34] | WebM | WAV | m4a | ААС | Ога) $ ": "/__mocks__/fileMock.js"," \ . \ (CSS | меньше | s [ас] сс | Styl) $ ": "/__mocks__/styleMock.js"}, "moduleFileExtensions": [ "JS", "JSX"], "moduleDirectories": [ "node_modules" ]}} А вот мой webpack.config.js (как выиграть / Linux) "использовать строгий"; вар WebPack = требуется ( 'WebPack'); вар путь = требуется ( «путь»); вар погрузчики = требуется (»./ webpack.loaders'); вар HtmlWebpackPlugin = требуется (» HTML-WebPack-плагин); вар DashboardPlugin = требуется ( 'WebPack-панель / плагин'); вар ExtractTextPlugin = требуется ( 'Extract-текст-WebPack-плагин'); Const HOST = process.env.HOST || "127.0.0.1"; Const ПОРТ = process.env.PORT || "8888"; loaders.push ({тест: /\.scss$/, погрузчики: [ 'стиль-погрузчик', 'CSS-погрузчик importLoaders = 1?', 'дерзость-погрузчик'], исключить: [ 'node_modules']}); module.exports = {запись: [ 'реагировать-горячекатаного погрузчик / патч', './app/src/index.jsx', // точка входа вашего приложения], devtool: process.env.WEBPACK_DEVTOOL || 'Eval-источник-карта', выход: {publicPath: '/', путь: path.join (__ имя_директории, 'общественность'), имя файла: 'bundle.js'}, постановляю: {расширений: [».js', '.jsx']}, модуль:
Piet Smet
1

голосов
0

ответ
43

Просмотры

React: При использовании Redux, где бы я кладу константы, которые необходимы для моего поиска данных?

импорта React, {Компонент} от 'реагируют'; импорт Выберите из «реагировать-выберите»; импорта 'реагировать-выбор / расстояние / реагировать-select.css'; импорт импортировать»../css/Input.css {} соединиться с 'реагируют-Redux'; константные страны = {Китай: { "образ": './typeI.jpg', "флаг": "https://www.free-country-flags.com/countries/China/1/large/China.png" , "otherCountries": [ "Аргентина", "Австралия", "Фиджи", "Новая Зеландия", "Papa Новая Гвинея", "Самоа", "Тонга"]}, Австралия: { "образ":»./ typeI.jpg», "флаг": "https://www.free-country-flags.com/countries/Australia/1/large/Australia.png", "otherCountries": [ "Аргентина", "Китай", " страны [selectedOption.value] .otherCountries, напряжение: страны [selectedOption.value] .voltage, разъемы: страны [selectedOption.value] .plugs, ссылка: страны [selectedOption.value] .link}); } Визуализации () {
swirdlerss

Просмотр дополнительных вопросов

Связанные вопросы