设置 redux thunk 时遇到问题

Question

我有以下动作创建者：

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

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

this.props.selectBook(params.bookID);

应该是这个吗？:

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

dispatch 是用什么导入的？从 'redux'?

导入调度

Answer 1

试着像那样做你的动作创造者： 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})) } } 它需要 return 函数

Answer 2

dispatch 通过 redux-thunk 免费提供给您。这里的技巧是您的动作创建者应该 return 一个函数，并且该函数的第一个参数将是 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}))
  }
}

设置 redux thunk 时遇到问题

trouble setting up redux thunk

redux

redux-thunk

axios