Итак, я пытаюсь обновить магазин и свой компонент из отдельного файла 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
);
Импортируйте магазин в свой newFile.jsx
и отправляйте оттуда.
import { successAction, errorAction } from "./actions";
import store from "./store";
setTimeout(function() {
console.info("Timeout Complete");
store.dispatch( successAction() );
}, 2500);
Это было намного проще, чем я думал. Спасибо!
У меня есть вопрос, если не сложно. Это должно быть легко, и это звучит довольно очевидно. Везде, где я хочу обновить магазин, мне нужно импортировать его в этот конкретный файл? Например, если у меня есть файл file1.js, он импортируется в файл file2.js, в котором также импортируется хранилище. Это все еще нужно зайти в оба?
@ник да ты знаешь.
Просто введите соответствующий код. См. минимальный воспроизводимый пример.