Вопросы по тегу: redux

(43)

Состояние как массив объектов и объект с ключом по идентификатору

В главе Проектирование формы состояниядокументация предлагает хранить ваше состояние в объекте с ID: Сохраняйте каждую сущность в объекте с идентификатором в качестве ключа и используйте идентификаторы для ссылки на нее из других сущностей или списков. Они продолжают говорить Подумайте о состоянии приложения как о базе данных. Я работаю над формой состояния для списка фильтров, некоторые из которых будут открыты (они отображаются во всплывающем окне) или имеют выбранные параметры. Когда я прочитал «Думайте о состоянии приложения как о базе данных», я подумал о том, чтобы думать о них как об ответе JSON, поскольку он будет возвращен из API (который сам поддерживается базой данных).Я думал об этом как[{ id: '1', name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, { id: '10', name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', }] Однако в документации предлагается формат, больше похожий на{ 1: { name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, 10: { name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', } } Теоретически это не имеет значения, если данные сериализуемы (под заголовком "Состояние").Поэтому я с удовольствием использовал подход с массивом объектов, пока не написал свой редьюсер.При подходе с ключом объекта по идентификатору (и свободном использовании синтаксиса распространения) часть редуктора OPEN_FILTER становитсяswitch (action.type) { case OPEN_FILTER: { return { ...state, { ...state[action.id], open: true } } } В то время как подход с массивом объектов более подробный (и зависит от вспомогательной функции)switch (action.type) { case OPEN_FILTER: { // relies on getFilterById helper function const filter = getFilterById(state, action.id); const index = state.indexOf(filter); return state .slice(0, index) .concat([{ ...filter, open: true }]) .concat(state.slice(index + 1)); } ... Итак, у меня три вопроса:1) Является ли простота редуктора мотивацией для использования подхода с ключом объекта по идентификатору? Есть ли другие преимущества в этой форме состояния?и2) Похоже, что подход с ключом объекта по идентификатору усложняет работу со стандартным вводом/выводом JSON для API. (Вот почему я в первую очередь выбрал массив объектов.) Итак, если вы выберете этот подход, вы просто используете функцию для преобразования его туда и обратно между форматом JSON и форматом формы состояния? Это кажется неуклюжим. (Хотя, если вы поддерживаете этот подход, является ли частью ваших рассуждений то, что он менее неуклюж, чем редуктор массива объектов выше?)и3) Я знаю, что Дэн Абрамов разработал редукцию, чтобы теоретически быть независимым от структуры данных и состояния (как было предложено «По соглашению, состояние верхнего уровня является объектом или какой-либо другой коллекцией ключ-значение, такой как Карта, но технически это может быть любой тип, " подчеркнуто мной). Но, учитывая вышеизложенное, просто «рекомендуется» сохранить его как объект с ключом по идентификатору, или есть другие непредвиденные болевые точки, с которыми я столкнусь, используя массив объектов, которые делают его таким, что я должен просто прервать это спланировать и попытаться придерживаться объекта с ID?
n

nickcoxdotme

6 лет назад

Ответов: 3

React setState не обновляется немедленно

Я работаю над приложением todo. Это очень упрощенная версия вредоносного кода. У меня есть флажок: Writing Item Вот функция, которая вызывает флажок:checkPencil(){ this.setState({ pencil:!this.state.pencil, }); this.props.updateItem(this.state); } updateItem — это функция, которая сопоставлена ​​с отправкой в ​​reduxfunction mapDispatchToProps(dispatch){ return bindActionCreators({ updateItem}, dispatch); } Моя проблема в том, что когда я вызываю действие updateItem и console.log состояние, оно всегда отстает на 1 шаг. Если флажок не установлен и не соответствует действительности, я все равно получаю состояние true, передаваемое функции updateItem. Нужно ли вызывать другую функцию, чтобы принудительно обновить состояние?
l

lost9123193

5 лет назад

Ответов: 11

Могу ли я использовать mapDispatchToProps без mapStateToProps в Redux?

Я разбираю пример Redux, чтобы попытаться понять его. Я читал, что mapDispatchToProps позволяет отображать действия отправки в качестве реквизита, поэтому я подумал о переписывании addTodo.js для использования mapDispatchToProps вместо вызова dispatch(addTodo()). Я назвал это добавлениеTodo(). Что-то вроде этого:import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> { input = node }} /> Submit ) } const mapDispatchToProps = { addingTodo: addTodo } AddTodo = connect( mapDispatchToProps )(AddTodo) export default AddTodo Однако, когда я запускаю приложение, я получаю эту ошибку: Ошибка: Недопустимое значение объекта типа для аргумента mapStateToProps при подключении компонента AddTodo.. Я никогда не использовал mapStateToProps для начала в компоненте AddTodo, поэтому я не был уверен, что не так. Моя интуиция подсказывает, что connect() ожидает, что mapStateToProps будет предшествовать mapDispatchToProps.Рабочий оригинал выглядит так:import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({dispatch}) => { let input; return ( { e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = "" }}> { input = node }} /> Submit ) } AddTodo = connect()(AddTodo) export default AddTodo Полный репозиторий можно найти здесь.Итак, мой вопрос: возможно ли сделать mapDispatchToProps без mapStateToProps? Является ли то, что я пытаюсь сделать, приемлемой практикой? Если нет, то почему?
I

Iggy

4 года назад

Ответов: 1

Какая польза от аргумента ownProps в mapStateToProps и mapDispatchToProps?

Я вижу, что функции mapStateToProps и mapDispatchToProps, которые передаются функции connect в Redux, принимают ownProps в качестве второго аргумента. .[mapStateToProps(state, [ownProps]): stateProps] (Function): [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): Для чего нужен необязательный аргумент [ownprops]?Я ищу дополнительный пример, чтобы прояснить ситуацию, так как он уже есть в документах Redux
t

therewillbecode

5 лет назад

Ответов: 3

Зачем использовать Redux-Observable вместо Redux-Saga?

Я использовал Redux-Saga. Код, написанный с его помощью, до сих пор легко рассуждать, за исключением того, что функция генератора JS время от времени путает мою голову. Насколько я понимаю, Redux-Observable может выполнять аналогичную работу, которая обрабатывает побочные эффекты, но без использования функции генератора.Однако в документах Redux-Observable не содержится много мнений о том, почему он лучше Redux-Saga. Я хотел бы знать, является ли неиспользование функции генератора единственным преимуществом использования Redux-Observable. И какие могут быть недостатки, ловушки или компромиссы от использования Redux-Observable вместо Redux-Saga? Заранее спасибо.
I

Ivan Wang

5 лет назад

Ответов: 7

Запуск CRA Jest в неинтерактивном режиме

Обновление: в основном я использую тесты в CI, но обычно меня интересует переопределение параметров CRA Jest по умолчанию.Я запускаю тесты, используя Jest, конфигурацию, поставляемую с Create React App. Всегда запускается в интерактивном режиме: › Press a to run all tests. › Press o to only run tests related to changed files. › Press p to filter by a filename regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run. Но я не хочу, чтобы он ждал моего ввода. Я хочу, чтобы он запускался один раз, а затем завершался. Я пытался использовать переключатели --bail или --no-watchman, но он по-прежнему запускается в интерактивном режиме.Если я глобально устанавливаю jestи запускаю его в корне моего проекта, он выполняется один раз и завершается (как я хочу). Но когда я запускаю npm test, который запускает react-scripts test, он переходит в режим наблюдения, даже если я не прохожу --watch.*100010 *Обновление: я также зарегистрировал проблему на CRA.
A

AlexStack

5 лет назад

Ответов: 3

Реакция: родительский компонент повторно отображает все дочерние элементы, даже те, которые не изменились при изменении состояния.

Я не смог найти четкого ответа на этот вопрос, надеюсь, это не повторяется.Я использую React + Redux для простого приложения для чата. Приложение состоит из компонентов InputBar, MessageList и Container. Контейнер (как вы можете себе представить) оборачивает два других компонента и подключается к хранилищу. Состояние моих сообщений, а также текущее сообщение (сообщение, которое пользователь вводит в данный момент) хранится в магазине Redux. Упрощенная структура:class ContainerComponent extends Component { ... render() { return ( ); } } Проблема возникает при обновлении текущего сообщения. Обновление текущего сообщения запускает действие, которое обновляет хранилище, которое обновляет реквизиты, проходящие через контейнер и обратно в компонент InputBar.Это работает, однако побочным эффектом является то, что мой компонент MessageList перерисовывается каждый раз, когда это происходит. MessageList не получает текущее сообщение и не имеет причин для обновления. Это большая проблема, потому что, как только MessageList становится большим, приложение становится заметно медленнее каждый раз, когда обновляются текущие сообщения.Я пытался установить и обновить текущее состояние сообщения непосредственно в компоненте InputBar (поэтому полностью игнорируя архитектуру Redux), и это «решило» проблему, однако я хотел бы придерживаться шаблона проектирования Redux, если это возможно.*100002 *Мои вопросы: Если обновляется родительский компонент, всегда ли React обновляет все прямые дочерние элементы внутри этого компонента? Какой здесь правильный подход?
N

Nicholas Haley

5 лет назад

Ответов: 4

Является ли использование Redux с Next.js анти-шаблоном?

Я создаю приложение Next.js, и в настоящее время оно использует Redux. Пока я его строю, мне интересно, действительно ли необходимо использование Redux и является ли его использование на самом деле анти-шаблоном. Вот мои рассуждения:Чтобы правильно инициализировать Redux Store в Next.js, вы должны создать собственный компонент App с методом getInitialProps. Делая это, вы отключаете Автоматическую статическую оптимизацию, которую предоставляет Next.js.Напротив, если бы я включил Redux на стороне клиента только после того, как приложение смонтировалось, тогда хранилище Redux будет сбрасываться после каждой навигации на стороне сервера. Например, у меня есть приложение Next.js, которое инициализирует хранилище Redux на стороне клиента, но при перенаправлении на динамический маршрут, такой как pages/projects/[id], страница находится на стороне сервера. рендерится, и мне приходится повторно получать любую информацию, которая была в магазине.Мои вопросы: Каковы преимущества магазина Redux в этом случае? Должен ли я инициализировать хранилище в корневом компоненте App и отказаться от автоматической статической оптимизации? Есть ли лучший способ управления состоянием в Next.js 9.3 с помощью getStaticProps и других методов выборки данных Я что-то пропустил?
J

Jamie S

2 года назад

Ответов: 4

В чем разница между redux-thunk и redux-promise?

Насколько я знаю и поправьте меня, если я ошибаюсь, redux-thunk — это промежуточное программное обеспечение, которое помогает нам отправлять асинхронную функцию и отлаживать значения в самом действии, тогда как когда я использовал redux- обещание Я не мог создавать асинхронные функции без реализации собственного механизма, поскольку действие выдает исключение отправки только простых объектов.В чем основные различия между этими двумя пакетами? Есть ли какие-либо преимущества использования обоих пакетов в одностраничном приложении реакции или будет достаточно придерживаться redux-thunk?
s

shet_tayyy

6 лет назад

Ответов: 3

How do I access store state in React Redux?

I am just making a simple app to learn async with redux. I have gotten everything working, now I just want to display the actual state onto the web-page. Now, how do I actually access the store's state in the render method? Here is my code (everything is in one page because I'm just learning): const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { return {...state, fetching: false, error: action.payload} } default: return state; } }; const middleware = applyMiddleware(promise(), thunk, logger()); const store = createStore(reducer, middleware); store.dispatch({ type: "REQUEST", payload: fetch('http://localhost:8000/list').then((res)=>res.json()) }); store.dispatch({ type: "REQUEST", payload: fetch('http://localhost:8000/list').then((res)=>res.json()) }); render( { this.props.items.map((item) => {item.title} )} , document.getElementById('app') ); So, in the render method of the state I want to list out all the item.title from the store. Thanks
P

Parkicism

6 лет назад

Ответов: 6

Когда использовать компоненты React на основе классов ES6 по сравнению с функциональными компонентами ES6 React?

Потратив некоторое время на изучение React, я понял разницу между двумя основными парадигмами создания компонентов.У меня вопрос, когда я должен использовать какой и почему? Каковы преимущества / компромиссы одного над другим?Классы ES6:import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( ); } } Функциональный:const MyComponent = (props) => { return ( ); } Я считаю функциональным всякий раз, когда этот компонент не может управлять состоянием, но так ли это?Думаю, если я использую какие-либо методы жизненного цикла, лучше всего будет использовать компонент на основе классов.
o

omarjmh

6 лет назад

Ответов: 5

Как показать индикатор загрузки в приложении React Redux при получении данных?

Я новичок в React / Redux. Я использую промежуточное ПО fetch api в приложении Redux для обработки API. Это (redux-api-middleware). Я думаю, что это хороший способ обрабатывать действия async api. Но я нахожу такие дела, которые не могу разрешить самостоятельно.Как говорится на домашней странице (Жизненный цикл), жизненный цикл API выборки начинается с отправки действия CALL_API и заканчивается отправкой действия FSA.Итак, мой первый случай показывает / скрывает предварительный загрузчик при загрузке API. По промежуточного слоя отправляет действие FSA в начале и отправляет действие FSA в конце. Оба действия принимаются редукторами, которые должны выполнять только некоторую нормальную обработку данных. Никаких операций пользовательского интерфейса, никаких операций. Возможно, мне стоит сохранить статус обработки в состоянии, а затем отобразить их при обновлении магазина.а как это сделать? Поток компонентов реагирования на всю страницу? что случилось с обновлением магазина из других действий? Я имею в виду, что они больше похожи на события, чем на состояние!Даже в худшем случае, что мне делать, если мне нужно использовать собственный диалог подтверждения или диалоговое окно с предупреждением в приложениях redux / response? Куда их ставить, действия или редукторы?С наилучшими пожеланиями! Желаю ответа.

企业应用架构模式大师

6 лет назад

Ответов: 8

Как обновить одно значение внутри определенного элемента массива в redux

У меня проблема, когда повторный рендеринг состояния вызывает проблемы с пользовательским интерфейсом, и мне было предложено обновить только определенное значение внутри моего редуктора, чтобы уменьшить количество повторного рендеринга на странице.это пример моего состояния{ name: "some name", subtitle: "some subtitle", contents: [ {title: "some title", text: "some text"}, {title: "some other title", text: "some other text"} ] } и сейчас я обновляю его вот такcase 'SOME_ACTION': return { ...state, contents: action.payload } , где action.payload - целый массив, содержащий новые значения. Но теперь мне просто нужно обновить текст второго элемента в массиве содержимого, и что-то подобное не работаетcase 'SOME_ACTION': return { ...state, contents[1].text: action.payload } , где action.payload теперь текст, который мне нужен для обновления.
I

Ilja

6 лет назад

Ответов: 11

В чем разница между redux и конечным автоматом (например, xstate)?

Я работаю над исследованием одного клиентского приложения средней сложности. На данный момент он написан на чистом javascript, в нем много различных сообщений, основанных на событиях, соединяющих несколько основных частей этого приложения.Мы решили, что нам нужно реализовать какой-то контейнер состояний для этого приложения в рамках дальнейшего рефакторинга. Раньше у меня был некоторый опыт работы с redux и ngrx store (который фактически следует тем же принципам).Redux - вариант для нас, но один из разработчиков предложил использовать библиотеку на основе конечного автомата, в частности библиотеку xstate.Я никогда не работал с xstate, поэтому мне это показалось интересным, и я начал читать документацию и рассматривать разные примеры. Выглядело многообещающе и мощно, но в какой-то момент я понял, что не вижу существенной разницы между ним и redux.Я часами пытался найти ответ или любую другую информацию, сравнивая xstate и redux. Я не нашел никакой четкой информации, кроме некоторых статей вроде «получить от redux до конечного автомата»или ссылок на библиотеки, ориентированные на использование redux и xstate вместе (довольно странно) .Если кто-то может описать разницу или подсказать, когда разработчикам следует выбирать xstate - добро пожаловать.
A

Artem Arkhipov

3 года назад

Ответов: 3

Как лучше всего перенаправить страницу с помощью React Router?

Я новичок в React Router и узнал, что существует так много способов перенаправить страницу: Использование browserHistory.push ("/ path") импорт {browserHistory} из 'response-router'; //сделай что-нибудь... browserHistory.push ("/ путь"); Использование this.context.router.push ("/ path") class Foo расширяет React.Component { конструктор (реквизит, контекст) { супер (реквизит, контекст); //сделай что-нибудь... } redirect () { this.context.router.push ("/ путь") } } Foo.contextTypes = { маршрутизатор: React.PropTypes.object } В React Router v4 есть this.context.history.push ("/ path") и this.props.history.push ("/ path"). Подробности: Как отправить в историю в React Router v4? Меня так сбивают с толку все эти варианты, есть ли лучший способ перенаправить страницу?
L

Liutong Chen

5 лет назад

Ответов: 5

Это правильный способ удалить элемент с помощью redux?

Я знаю, что я не должен изменять ввод и должен клонировать объект, чтобы изменить его. Я следовал соглашению, используемому в стартовом проекте redux, который использовал: ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) для добавления элемента - я использую распространение для добавления элемента в массив.для удаления я использовал: DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) , но это изменяет объект состояния ввода - это запрещено, даже если я возвращаю новый объект?
C

CWright

6 лет назад

Ответов: 6

Локальный package.json существует, но отсутствуют модули node_modules

Я пытаюсь запустить приложение Redux, которое я только что клонировал из репозитория GitHub.Я попытался запустить его следующей командой npm start Я получаю эту ошибку > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the react-redux@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! /home/.npm/_logs/2018-05-15T16_32_44_571Z-debug.log Любая помощь будет оценена
D

Deepak Mahakale

4 года назад

Ответов: 5

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

Я пытаюсь добавить закусочную, чтобы отображать сообщение всякий раз, когда пользователь входит в систему или нет. SnackBar.jsx:import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon from "@material-ui/icons/Error"; import CloseIcon from "@material-ui/icons/Close"; import green from "@material-ui/core/colors/green"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "@material-ui/core/Snackbar"; import SnackbarContent from "@material-ui/core/SnackbarContent"; import { withStyles } from "@material-ui/core/styles"; const variantIcon = { success: CheckCircleIcon, error: ErrorIcon }; const styles1 = theme => ({ success: { backgroundColor: green[600] }, error: { backgroundColor: theme.palette.error.dark }, icon: { fontSize: 20 }, iconVariant: { opacity: 0.9, marginRight: theme.spacing.unit }, message: { display: "flex", alignItems: "center" } }); function SnackbarContentWrapper(props) { const { classes, className, message, onClose, variant, ...other } = props; const Icon = variantIcon[variant]; return ( {message} )} action={[ ]} {...other} /> ); } SnackbarContentWrapper.propTypes = { classes: PropTypes.shape({ success: PropTypes.string, error: PropTypes.string, icon: PropTypes.string, iconVariant: PropTypes.string, message: PropTypes.string, }).isRequired, className: PropTypes.string.isRequired, message: PropTypes.node.isRequired, onClose: PropTypes.func.isRequired, variant: PropTypes.oneOf(["success", "error"]).isRequired }; const MySnackbarContentWrapper = withStyles(styles1)(SnackbarContentWrapper); const CustomizedSnackbar = ({ open, handleClose, variant, message }) => { return ( ); }; CustomizedSnackbar.propTypes = { open: PropTypes.bool.isRequired, handleClose: PropTypes.func.isRequired, variant: PropTypes.string.isRequired, message: PropTypes.string.isRequired }; export default CustomizedSnackbar; SignInFormContainer.jsx:import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import SnackBar from '../../components/SnackBar'; import SignInForm from './SignInForm'; const SingInContainer = ({ message, variant}) => { const [open, setSnackBarState] = useState(false); const handleClose = (reason) => { if (reason === 'clickaway') { return; } setSnackBarState(false) }; if (variant) { setSnackBarState(true); } return ( ) } SingInContainer.propTypes = { variant: PropTypes.string.isRequired, message: PropTypes.string.isRequired } const mapStateToProps = (state) => { const {variant, message } = state.snackBar; return { variant, message } } export default connect(mapStateToProps)(SingInContainer); При запуске приложения выскакивает ошибка:Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop. at invariant (http://localhost:9000/bundle.js:34484:15) at dispatchAction (http://localhost:9000/bundle.js:47879:44) at SingInContainer (http://localhost:9000/bundle.js:79135:5) at renderWithHooks (http://localhost:9000/bundle.js:47343:18) at updateFunctionComponent (http://localhost:9000/bundle.js:49010:20) at beginWork (http://localhost:9000/bundle.js:50020:16) at performUnitOfWork (http://localhost:9000/bundle.js:53695:12) at workLoop (http://localhost:9000/bundle.js:53735:24) at HTMLUnknownElement.callCallback (http://localhost:9000/bundle.js:34578:14) at Object.invokeGuardedCallbackDev (http://localhost:9000/bundle.js:34628:16) Проблема связана с компонентом SnackBar. Я использую хуки useState, чтобы изменить состояние SnackBar. Должен ли я использовать класс и componentShouldUpdate, чтобы не отображать несколько раз?
S

Slim

3 года назад

Ответов: 9

Как я могу сохранить дерево состояний редукции при обновлении?

Первый принцип документации Redux: Состояние всего вашего приложения хранится в дереве объектов в одном хранилище. И я вообще-то думал, что хорошо понимаю все принципы. Но теперь я запутался, что означает приложение.Если приложение означает лишь одну из небольших сложных частей на веб-сайте и работает только на одной странице, я понимаю. Но что, если приложение означает весь сайт? Должен ли я использовать LocalStorage или cookie или что-то еще для хранения дерева состояний? Но что, если браузер не поддерживает LocalStorage?Я хочу знать, как разработчики хранят свое дерево состояний! :)
i

incleaf

6 лет назад

Ответов: 3

Получить: отклонить обещание и поймать ошибку, если статус не в порядке?

Вот что у меня:import 'whatwg-fetch'; function fetchVehicle(id) { return dispatch => { return dispatch({ type: 'FETCH_VEHICLE', payload: fetch(`http://swapi.co/api/vehicles/${id}/`) .then(status) .then(res => res.json()) .catch(error => { throw(error); }) }); }; } function status(res) { if (!res.ok) { return Promise.reject() } return res; } РЕДАКТИРОВАТЬ: обещание не отклоняется, это то, что я пытаюсь выяснить.Я использую этот fetch polyfill в Redux с redux-prom-middleware.
V

Vlady Veselinov

6 лет назад

Ответов: 10

'dispatch' не является функцией, когда аргумент mapToDispatchToProps () в Redux

Я новичок в javascript / redux / react, создаю небольшое приложение с redux, react-redux и react. По какой-то причине при использовании функции mapDispatchToProps в тандеме с connect (привязка response-redux) я получаю TypeError, указывающий, что отправка не является функцией, когда я пытаюсь выполнить полученную опору. Однако, когда я вызываю диспетчеризацию как опору (см. Функцию setAddr в предоставленном коде), она работает.Мне любопытно, почему это так, в примере приложения TODO в документации redux метод mapDispatchToProps настроен таким же образом. Когда я console.log (отправка) внутри функции, он говорит, что отправка - это объект типа. Я мог бы продолжать использовать диспетчеризацию таким образом, но мне было бы лучше знать, почему это происходит, прежде чем я продолжу работу с redux. Я использую webpack с загрузчиками babel для компиляции.Мой код:import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, dropoff: this.refs.dropoff.state.address }) ) }, render: function() { return ( ); } }) const mapDispatchToProps = (dispatch) => { return { onSubmit: (data) => { dispatch(setAddresses(data)) } } } const StartContainer = connect(mapDispatchToProps)(Start) export default StartContainer Ура.
c

condad

6 лет назад

Ответов: 12

Является store.dispatch в Redux синхронным или асинхронным

Я понимаю, что это основной вопрос, но мне не удалось найти ответ в другом месте.Является ли store.dispatch синхронным или асинхронным в Redux?Если это асинхронно, есть ли возможность добавить обратный вызов после того, как действие было распространено, как это возможно с React?
p

ps-aux

5 лет назад

Ответов: 2

Метод жизненного цикла ReactJS внутри компонента функции

Instead of writing my components inside a class, I'd like to use the function syntax.Как переопределить componentDidMount, componentWillMount внутри функциональных компонентов? Возможно ли такое?const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log('mount it!'); }; return( ) }
A

Aftab Naveed

5 лет назад

Ответов: 8

Where to write to localStorage in a Redux app?

Я хочу сохранить некоторые части моего дерева состояний в localStorage. Какое подходящее место для этого? Редуктор или действие?
M

Marco de Jongh

6 лет назад

Ответов: 9

Axios получает URL-адрес, но со вторым параметром в качестве объекта он не работает

Я пытаюсь отправить запрос GET как второй параметр, но он не работает, пока работает как url.Это работает, $ _GET ['naam'] возвращает тест:export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test') .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; Но когда я пробую это, в $ _ GET ничего нет вообще:export function saveScore(naam, score) { return function (dispatch) { axios.get('http://****.nl/****/gebruikerOpslaan.php', { password: 'pass', naam: naam, score: score }) .then((response) => { dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data}) }) .catch((err) => { dispatch({type: "SAVE_SCORE_FAILURE", payload: err}) }) } }; Почему я не могу этого сделать? В документации четко сказано, что это возможно. С $ _ POST тоже не работает.
S

Sinan Samet

5 лет назад

Ответов: 4

Получение сообщения «Ошибка попытки импорта:» в приложении React

I am receiving the following error when trying to run my React app: ./src/components/App/App.js Attempted import error: 'combineReducers' is not exported from '../../store/reducers/'. Here's how I'm exporting combineReducers:import { combineReducers } from 'redux'; import userReducers from './userReducers'; import articleReducers from './articleReducers'; export default combineReducers({ userReducers, articleReducers }); and here's how I'm importing it in App.js:import { combineReducers } from '../../store/reducers'; What's incorrect in how I'm exporting combineReducers?
A

Andrew

3 года назад

Ответов: 7

Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)"

Full code here: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4Hi, I have an application where it shows different templates for desktop and mobile on basis of build environment. I am successfully able to develop it where I need to hide the navigation menu for my mobile template. right now I am able to write one test case where it fetches all the values through the proptypes and renders correctly but not sure how to write the unit test cases when its mobile it should not render nav component. I tried but I am facing an error...can you tell me how to fix it. provding code below. Test caseimport {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let sportsContentContainerAuthExchange = {hasValidAccessToken: true}; let sportsContentContainerHasValidAccessToken ='test'; it('should render correctly', () => { shallowRenderer.render(); //shallowRenderer.render(); let renderedElement = shallowRenderer.getRenderOutput(); console.log("renderedElement------->" + JSON.stringify(renderedElement)); expect(renderedElement).to.exist; }); it('should not render sportsNavigationComponent when sports.build is mobile', () => { let sportsNavigationComponent = TestUtils.renderIntoDocument(); console.log("sportsNavigationComponent------->" + JSON.stringify(sportsNavigationComponent)); //let footnoteContainer = TestUtils.findRenderedDOMComponentWithClass(sportsNavigationComponent, 'linkPack--standard'); //expect(footnoteContainer).to.exist; }); }); Code snippet where test case need to be writtenif (sports.build === 'mobile') { sportsNavigationComponent = ; sportsSideMEnu = ; searchComponent = ; sportsPlayersWidget = ; } Error1) "sports-top-portion" Unit Tests should not render sportsNavigationComponent when sports.build is mobile: Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(SportsDatabase)". at Object.invariant [as default] (C:\sports-whole-page\node_modules\invariant\invariant.js:42:15) at new Connect (C:\sports-whole-page\node_modules\react-redux\lib\components\createConnect.js:135:33) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:148:18) at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) at mountComponentIntoNode (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:266:32) at ReactReconcileTransaction.Mixin.perform (C:\sports-whole-page\node_modules\react\lib\Transaction.js:136:20) at batchedMountComponentIntoNode (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:282:15) at ReactDefaultBatchingStrategyTransaction.Mixin.perform (C:\sports-whole-page\node_modules\react\lib\Transaction.js:136:20) at Object.ReactDefaultBatchingStrategy.batchedUpdates (C:\sports-whole-page\node_modules\react\lib\ReactDefaultBatchingStrategy.js:62:19) at Object.batchedUpdates (C:\sports-whole-page\node_modules\react\lib\ReactUpdates.js:94:20) at Object.ReactMount._renderNewRootComponent (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:476:18) at Object.wrapper [as _renderNewRootComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactMount._renderSubtreeIntoContainer (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:550:32) at Object.ReactMount.render (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:570:23) at Object.wrapper [as render] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) at Object.ReactTestUtils.renderIntoDocument (C:\sports-whole-page\node_modules\react\lib\ReactTestUtils.js:76:21) at Context. (C:/codebase/sports-whole-page/test/components/sports-top-portion/sports-top-portion-unit-tests.js:28:41) at callFn (C:\sports-whole-page\node_modules\mocha\lib\runnable.js:286:21) at Test.Runnable.run (C:\sports-whole-page\node_modules\mocha\lib\runnable.js:279:7) at Runner.runTest (C:\sports-whole-page\node_modules\mocha\lib\runner.js:421:10) at C:\sports-whole-page\node_modules\mocha\lib\runner.js:528:12 at next (C:\sports-whole-page\node_modules\mocha\lib\runner.js:341:14) at C:\sports-whole-page\node_modules\mocha\lib\runner.js:351:7 at next (C:\sports-whole-page\node_modules\mocha\lib\runner.js:283:14) at Immediate._onImmediate (C:\sports-whole-page\node_modules\mocha\lib\runner.js:319:5)
u

user6015171

6 лет назад

Ответов: 9

How do I add an element to array in reducer of React native redux?

How do I add elements in my array arr[] of redux state in reducer? I am doing this-import {ADD_ITEM} from '../Actions/UserActions' const initialUserState = { arr:[] } export default function userState(state = initialUserState, action) { console.log(arr); switch (action.type) { case ADD_ITEM: return { ...state, arr: state.arr.push([action.newItem]) } default: return state } }
c

coderzzz18

5 лет назад

Ответов: 6

React - Display loading screen while DOM is rendering?

Это пример со страницы приложения Google AdSense. Экран загрузки, отображаемый до главной страницы, отображается после.• 100001Обновлено:Я сделал пример своего подхода, поместив загрузчик экрана в index.html и удалив его в React componentDidMount () метод жизненного цикла.Пример и экран загрузки-реакции.
T

Thanh Nguyen

5 лет назад

Ответов: 23

Прикрепите заголовок авторизации для всех запросов axios

У меня есть приложение response / redux, которое извлекает токен с сервера api. После аутентификации пользователя я хотел бы, чтобы все запросы axios содержали этот токен в качестве заголовка авторизации без необходимости вручную прикреплять его к каждому запросу в действии. Я новичок в реакции / сокращении и не уверен в лучшем подходе, и я не нахожу качественных результатов в Google.Вот моя настройка редукции:// actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { type: LOGIN_USER, payload: request }; } export function fetchPages() { /* here is where I'd like the header to be attached automatically if the user has logged in */ const request = axios.get(PAGES_URL); return { type: FETCH_PAGES, payload: request }; } // reducers.js const initialState = { isAuthenticated: false, token: null }; export default (state = initialState, action) => { switch(action.type) { case LOGIN_USER: // here is where I believe I should be attaching the header to all axios requests. return { token: action.payload.data.key, isAuthenticated: true }; case LOGOUT_USER: // i would remove the header from all axios requests here. return initialState; default: return state; } } Мой токен хранится в хранилище redux под state.session.token.Я немного не понимаю, как действовать дальше. Я попытался создать экземпляр axios в файле в моем корневом каталоге и обновить / импортировать его вместо node_modules, но он не прикрепляет заголовок при изменении состояния. Любые отзывы / идеи приветствуются, спасибо.
a

awwester

5 лет назад

Ответов: 9

2022 WebDevInsider