设置 redux thunk 时遇到问题答案

【问题标题】：trouble setting up redux thunk设置 redux thunk 时遇到问题
【发布时间】：2018-03-21 18:16:04
【问题描述】：

我有以下动作创建者：

export function selectBook(ISBN, dispatch) {
    const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
    dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true });
    axios.get(url)
        .then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data}))
        .catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false}))
}

我的项目的主索引文件中还有以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import LoginLayout from './layouts/LoginLayout';

import reducers from './reducers';
import ReduxPromise from 'redux-promise';
import reduxThunk from 'redux-thunk';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise, reduxThunk)(createStore);
//const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
        <LoginLayout />
    </Provider>
    , document.querySelector('.root'));

我对如何将调度调用到我的项目中感到困惑。我收到以下错误：

bundle.js:5690 Uncaught TypeError: dispatch is not a function

当我调用这个函数时，我没有传递任何调度。但我不确定如何调用调度。我需要用我的函数调用进行 redux 调用吗？

this.props.selectBook(params.bookID);

应该是这个吗？：

this.props.selectBook(params.bookID, dispatch);

什么导入是调度？从“redux”导入调度？

【问题讨论】：

标签： redux axios redux-thunk

【解决方案1】：

dispatch 通过redux-thunk 免费提供给您。这里的技巧是你的动作创建者应该返回一个函数，函数的第一个参数是dispatch。您的动作创建者最终将如下所示：

export function selectBook(ISBN) {
  return dispatch => {
    const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
    dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true });
    axios.get(url)
      .then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data}))
      .catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false}))
  }
}

【讨论】：

我将这个标记为正确，因为它没有说要使用 axios。从技术上讲，这是不正确的，但两个答案都说我需要围绕我的 axios 调用返回调度。谢谢。

【解决方案2】：

尝试像这样创建您的动作创建者： export function selectBook(ISBN) { const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`; return dispatch => { dispatch({ type: 'SELECT_BOOK_LOADING', isLoading:true }); axios.get(url) .then(({ data }) => dispatch({ type: 'SELECT_BOOK_SUCCESS', data})) .catch(( err ) => dispatch({ type: 'SELECT_BOOK_FAILURE', isLoading:false})) } } 需要返回函数

【讨论】：