Как отправить без подключения

#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.