#javascript #redux #react-redux #redux-thunk
Вопрос:
Я хочу отправить без компонента. Я создал этот код:
const handleClient = () => (dispatch) => {
try {
dispatch({
type: "SET_CLIENT",
user: {
id: 1,
name: "client",
},
});
} catch (err) {
console.log(err);
}
};
export default handleLogin;
Но этот код не работает. Я импортирую этот файл и использую его в событии onSubmit. Я использую Redux-Thunk.
@Редактировать
Посмотрите на этот код из учебника
export const fetchContacts = () => (dispatch) => {
fetch("https://myapi.local/contacts)
.then(res => res.json())
.then(json => dispatch(contactsFetched(json.results)));
};
Я сделал что-то подобное, и это работает, поэтому я не понимаю, что в этом примере это не работает. Я попробовал другой метод
import actions from "./actions";
import store from "../store";
const handleClient = () => {
try{
store.dispatch(actions.setClient({id: 1, name: 'Hello'}));
} catch(err){
console.log(err);
}
}
export default handleClient;
но это тоже не работает.
Комментарии:
1. Вы должны предоставить нам более подробную информацию о ваших редукторах и действиях, а также о том, где вы хотите их использовать и что они должны делать. Основываясь на вашем коде, мы можем просто предположить некоторые вещи, но не можем ответить на ваш вопрос.
Ответ №1:
https://redux.js.org/api/store#dispatchaction
Вам нужен доступ к вашему экземпляру магазина redux, который вы создали где-то в своей кодовой базе через createStore()
. Тогда это просто store.dispatch(handleclient())
.
Пожалуйста, имейте в виду, что это, как правило, редкое требование и, возможно, запах кода. Почему ваш удар не запускается из компонента React?
Комментарии:
1. Нет, доступ к экземпляру магазина не требуется при использовании Redux-Thunk (если только я не неправильно понял, что вы имеете в виду).
2. @Guillaume Вопрос заключается в использовании
dispatch
вне react. Единственный способ отправлять действия без использованияconnect()
илиuseDispatch()
, как мне известно, напрямую с экземпляром магазина. Когда вы используете redux-thunk, вам все равно нужно каким-то образом отправить само действие thunk (независимо от отправки внутри thunk).3. Я обновил свой пост. Посмотри на это.
Ответ №2:
Вы никогда не должны использовать store.dispatch
, поэтому ваш первый пример неверен. Ваш второй пример лучше, но единственное место, где вы можете использовать useDispatch
, находится внутри функционального компонента или пользовательского крючка, вы не можете использовать его внутри обратного вызова, как handleLogin
. Попробуйте использовать useDispatch
в начале компонента React, а затем передайте функцию dispatch в качестве аргумента handleLogin
.
Комментарии:
1. Не могли бы вы объяснить мне, почему второй код (с выборкой) работает, а мой код-нет? Я использую нечто подобное в другом файле, и это работает. Использование нескольких методов для этого же действия, на мой взгляд, неверно.
2. Использование
store.dispatch
неверно.3. И код с выборкой-это удар, в то время как ваша функция выглядит как обратный вызов. Это два совершенно разных вида функций, которые имеют дело с диспетчеризацией совершенно по-разному.
4. Итак, могу ли я использовать функцию отправки, как в функции fetch?
5. @Guillaume Почему вы говорите, что никогда не следует использовать store.dispatch, когда он существует как api? redux.js.org/api/store#dispatchaction Это просто неверное общее утверждение. Также вы продолжаете упоминать useDispatch, который является крючком react-redux, в то время как OP четко заявляет, что они работают вне контекста react.