Redux структура асинхронной функции?

Question

Я пытаюсь выяснить, почему мне не удается получить функцию dispatch () из redux-thunk, которая, как предполагается, должна быть передана. Я пробовал несколько разных учебных пособий по кодированию, но ни одна из них мне не подходит, но я заметил, что было несколько разных типов реализаций.

Итак, мой вопрос прост: каков в целом правильный способ написания асинхронной функции для redux-thunk, чтобы обеспечить вызов диспетчеризации?

Примечание. Я могу вызвать создателя действия, но с ошибками: 1) отправка не акция 2) действие должно быть простым объектом

мое понимание того, о чем я прошу, - это асинхронное действие с избыточностью.

const getAttributes= () => {
  return (dispatch) => {
    return (/* Some async stuff */);
  }
}

Я не прав?

Конфигурации моего магазина:

import { createStore,applyMiddleware,combineReducers,compose } from 'redux';
import thunk from 'redux-thunk';
import {logger} from 'redux-logger';
import {inventoryFilter,availableAttributes} from '../reducers/reducer';


const Store = createStore(

///combine imported reducers
combineReducers({
    activeFilter:inventoryFilter,
    availableAttributes:availableAttributes

},applyMiddleware(thunk,logger)

));



export default Store;

index.js

Затем я подключаю его к провайдеру в React как таковому, но поскольку Redux фактически не зависит от этого, я выполняю вызов Store.Disptach () и React Component просто для проверки:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import FilterBar from './SideBar/FilterBar';
import Store from '../redux/store/mainStore';
import { REMOVE_ATTRIBUTE_FILTER,ADD_ATTRIBUTE_TO_FILTER, removeAttribute, addAttribute,getAttributes } from '../redux/actions/actions';

Store.subscribe(()=>{
    console.log("store changes", Store.getState())
})

Store.dispatch(getAttributes())


if (document.getElementById('InventoryDisplay')) {
  
        
    ReactDOM.render(
        <Provider store={Store}>
        <FilterBar/>
        </Provider>
        ,document.getElementById('FilterBar'));

   
}

Ошибки: 1) Отправка не является функцией. 2) Действие должно быть простым объектом

Answer 1

Это может произойти на странице компонента при связывании действий. что-то вроде

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(
      {
        action1,
        action2,
        ...
      },
      dispatch
    )
  };
}

Требуется больше кода.

Answer 2

Вам нужно выполнить асинхронные операции и , чтобы отправить туда действие (простой объект со свойством типа.