Question

我试图找出为什么我没有从redux-thunk接收dispatch（）函数，而该函数假设要传递。我已经尝试了几种不同的编码教程，但似乎没有一种对我有用，但我注意到的是有几种不同类型的实现。

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

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

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

＆＃13;

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

＆＃13;

我错了吗？

我的商店配置为：

＆＃13;

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;

＆＃13;

index.js

然后我将它连接到React中的提供程序，但由于Redux实际上是独立的，我之前调用Store.Disptach（）和React Component只是为了测试：

＆＃13;

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'));

   
}

＆＃13;

＆＃13; 错误是： 1）派遣不是一种功能。 2）动作需要是一个普通的对象

Answer 1

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

Answer 2

绑定操作时可能会在组件页面中发生。像，

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

需要更多代码。

Redux异步功能结构？

2 个答案: