React-Redux/Redux: обновление хранилища из внешней функции

Итак, я пытаюсь обновить магазин и свой компонент из отдельного файла JavaScript, но немного борюсь.

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

Вот код: https://codesandbox.io/s/reactredux-o5wbq

Если вы откроете page.js, вы увидите компонент страницы с двумя кнопками с функциями onClick. При нажатии значение h1 изменяется - это работает, как и ожидалось.

Теперь, если вы откроете newfile.jsx (входит в index.js), я установил тайм-аут в 2,5 секунды, который вызывает функцию успеха в actions.js. Функция выполняется успешно, так как она регистрирует «УСПЕХ». Но, насколько я могу судить, ни магазин, ни текст h1 на странице не обновляются.

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

Код:Ниже показано, что работает неправильно

import { successAction, errorAction } from "./actions";

setTimeout(function() {
  console.info("Timeout Complete");
  successAction();
}, 2500);

У меня есть следующее в моем фактическом компоненте, и я думаю, что это может быть то, чего мне не хватает. Я просто не знаю, как отформатировать его так, чтобы он работал в newfile.jsx. Насколько я могу судить, это встроено в способ экспорта компонента.

const mapStateToProps = state => ({
  status: state.status
});

const mapDispatchToProps = dispatch => ({
  successAction: () => dispatch(successAction()),
  errorAction: () => dispatch(errorAction())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Page);

Я пытался добавить нижеприведенное в newfile.jsx, но это не сработало.

const mapStateToProps = state => ({
  status: state.status
});

const mapDispatchToProps = dispatch => ({
  successAction: () => dispatch(successAction()),
  errorAction: () => dispatch(errorAction())
});

connect(
  mapStateToProps,
  mapDispatchToProps
);

Просто введите соответствующий код. См. минимальный воспроизводимый пример.

zero298 20.06.2019 21:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
218
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Импортируйте магазин в свой newFile.jsx и отправляйте оттуда.

import { successAction, errorAction } from "./actions";
import store from "./store";

setTimeout(function() {
  console.info("Timeout Complete");
  store.dispatch( successAction() );
}, 2500);

Это было намного проще, чем я думал. Спасибо!

Nick 20.06.2019 21:44

У меня есть вопрос, если не сложно. Это должно быть легко, и это звучит довольно очевидно. Везде, где я хочу обновить магазин, мне нужно импортировать его в этот конкретный файл? Например, если у меня есть файл file1.js, он импортируется в файл file2.js, в котором также импортируется хранилище. Это все еще нужно зайти в оба?

Nick 20.06.2019 21:48

@ник да ты знаешь.

Junius L. 20.06.2019 21:50

Другие вопросы по теме