无法在 redux 调度函数中获取

Question

首先，我对 React/Redux 世界还是陌生的。

我的 actions/index.js

中有以下操作

export function fetchLatestSchedule()
{
    //const uri = '/rest/schedule';
    console.log("Fetching latest schedule action");
    const uri = 'http://localhost:8585/MissionClockService/rest/schedule';
    return dispatch => {
        console.log("Fetching latest schedule action function");
        return fetch(uri)
        .then(response => {
            console.log("response: " + response);
            return response.json().then(body => ({ response, body }));}
        )
        .then(({ response, body }) => {
            console.log("Response from schedule fetch: " + body);
          if (!response.ok) {
            dispatch({
              type: SCHEDULE_REQUEST_FAILURE,
              payload: body.error
            });
          } else {
            dispatch({
              type: SET_CONTACTS,
              payload: body
            });
          }
        });
    }

}

我的商店是在 store/index.js

中创建的

import {createStore, combineReducers, applyMiddleware} from 'redux';
import reducers from '../reducers/index';
import thunk from 'redux-thunk';

const reducer = combineReducers(reducers);
const store = createStore(reducer, applyMiddleware(thunk));

export default store;

最后，我使用该操作的组件如下 (MissionClockApp.js)

import React, { Component } from 'react';
import NextContactPanel from './NextContactPanel';
import CurrentContactPanel from './CurrentContactPanel';
import ConfigMenu from './components/ConfigMenu';
import FileModal from './components/FileModal';
import WebsocketConnection from './components/WebsocketConnection';
import {fetchDefaultConfig, fetchLatestSchedule} from './actions';
import {connect} from 'react-redux';

const mapDispatchToProp = dispatch => {
    return {
        fetchData: function(){
            console.log("Fetching data");
            dispatch(fetchDefaultConfig);
            dispatch(fetchLatestSchedule);
        }
    };
  }

class ConnectedMissionClockApp extends React.Component
{
    componentDidMount()
    {
        this.props.fetchData();
    }

    render()
    {
        return (<div>
            <ConfigMenu/>
            <NextContactPanel/>
            <CurrentContactPanel/>
            <FileModal/>
            <WebsocketConnection/>
        </div>);
    }
}

const MissionClockApp = connect(null, mapDispatchToProp)(ConnectedMissionClockApp);
export default MissionClockApp

当我查看浏览器调试日志时，我看到了最多 "Fetching latest schedule action" 的消息，但之后什么也没有，我的 REST 服务在 GET 方法中没有收到任何类型的请求。

我确定这是我遗漏的一些非常基本的东西，但是当查看 https://redux.js.org/advanced/asyncactions 或其他 SO 帖子中的示例时，我似乎无法弄清楚我在这里做错了什么。除了发生我的 console.log 和 uri 集的 dispatch(...) 调用（我不关心调度 "making a request" 状态更改），我的代码看起来与示例几乎相同.

我哪里搞砸了？

谢谢！

Answer 1

问题是您实际上没有正确发送 thunk。

让我粘贴来自 a gist I wrote demonstrating various forms of dispatching 的示例：

// approach 1: dispatching a thunk function
const innerThunkFunction1 = (dispatch, getState) => {
    // do useful stuff with dispatch and getState        
};
this.props.dispatch(innerThunkFunction1);

// approach 2: use a thunk action creator to define the function        
const innerThunkFunction = someThunkActionCreator(a, b, c);
this.props.dispatch(innerThunkFunction);

// approach 3: dispatch thunk directly without temp variable        
this.props.dispatch(someThunkActionCreator(a, b, c));

// approach 4: pre-bind thunk action creator to automatically call dispatch
const boundSomeThunkActionCreator = bindActionCreators(someThunkActionCreator, dispatch);
boundSomeThunkActionCreator(a, b, c);

接受(dispatch, getState) => {}的函数才是真正的thunk函数。外层函数是一个"thunk action creator"，即returnsthunk函数。

当您编写 dispatch(fetchDefaultConfig); 时，您将 thunk 动作创建者 传递给 dispatch，而不是 实际的 thunk 函数本身。

当 thunk 中间件看到一个函数通过管道时，它运行就是那个函数。所以，它正在尝试运行你的动作创建者，并传入 (dispatch, getState)，但这是行不通的。

要使您当前的代码正常工作，它需要 dispatch(fetchDefaultConfig())。也就是说，调用thunk action creator，将返回的thunk函数传给dispatch.

就个人而言，我会把 fetchData 写成一个 thunk 本身，并使用 "object shorthand" 将动作创建者传递给连接的组件，而不是在 mapDispatch 函数中进行：

function fetchData() {
    return (dispatch) => {
        dispatch(fetchDefaultConfig());
        dispatch(fetchLatestSchedule());
    }
}

const mapDispatch = {fetchData};    

const MissionClockApp = connect(null, mapDispatch)(ConnectedMissionClockApp);

无法在 redux 调度函数中获取

Unable to fetch in redux dispatch function

reactjs

redux

redux-thunk