Redux 异步函数结构？答案

【问题标题】：Redux async function structure?Redux 异步函数结构？
【发布时间】：2018-04-30 10:53:41
【问题描述】：

我试图找出为什么我无法从 redux-thunk 接收到应该传递的 dispatch() 函数。我尝试了几个不同的编码教程，但似乎没有一个对我有用，但我确实注意到有几种不同类型的实现。

所以我的问题很简单，为 redux-thunk 编写异步函数以确保调用调度的总体正确方法是什么？

注意我可以调用动作创建者，但是错误： 1）调度不是一个动作 2) action 需要是一个普通的对象

我对我所要求的理解是 redux 异步操作。

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）动作需要是一个普通的对象

【问题讨论】：

你连接中间件了吗？
我无法理解这么多信息导致此错误的原因，您可能缺少正确的 thunk 配置或将操作绑定到组件。您可以查看我的基本存储库以了解 React Redux，如果您有任何问题，请告诉我。 github.com/brijeshbhakta30/create-react-redux-app
是的，我同意上面的评论，乍一看你的代码看起来还不错，所以它可能在你发布的块之外有问题
@BrijeshBhakta，我已经用附加代码更新了我的帖子。我确实在另一个应用程序上实现了 redux-thunk 而没有错误，我不知道我在这里做错了什么。
@Femi oni，我希望您对更新后的帖子发表意见

标签： javascript redux

【解决方案1】：

您需要执行异步操作并在其中调度一个操作（具有 type 属性的普通对象。

【讨论】：

@timotgl，我问是因为，我认为函数的结构是问题，但似乎不是，问题仍然存在，我用额外的支持代码更新了帖子。也许我错误地调用了调度。没有线索

【解决方案2】：

在绑定动作时，可能会发生在组件页面中。类似的，

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

需要更多代码。

【讨论】：