Redux Thunk配置问题求助：附Action Creator及项目主文件代码

看起来你的Redux Thunk配置和Action Creator写法有两处关键问题，我来帮你一步步修正：

1. 修正Action Creator的写法 #

你的selectBook函数直接把dispatch作为参数接收，这不符合Redux Thunk的要求——Thunk要求Action Creator返回一个函数，这个函数才会被中间件自动传入dispatch（和getState）。另外你也需要完善loading状态的更新和错误信息的传递：

export function selectBook(ISBN) {
  // 返回一个接收dispatch的函数，这是Redux Thunk的核心用法
  return (dispatch) => {
    const url = `${ROOT_ITEMS_URL}/${ISBN}?all=true`;
    // 派发loading状态
    dispatch({ type: 'SELECT_BOOK_LOADING', isLoading: true });
    
    axios.get(url)
      .then(({ data }) => {
        // 请求成功：关闭loading，传递数据
        dispatch({ 
          type: 'SELECT_BOOK_SUCCESS', 
          data,
          isLoading: false
        });
      })
      .catch((err) => {
        // 请求失败：关闭loading，传递错误信息
        dispatch({ 
          type: 'SELECT_BOOK_FAILURE', 
          isLoading: false,
          error: err.message
        });
      });
  };
}

2. 确保Redux Store正确配置Thunk中间件 #

你提到主index文件里有Provide...（应该是Provider），那需要确认你已经安装并应用了redux-thunk中间件，否则Redux无法识别返回函数的Action Creator：

第一步：安装redux-thunk #

npm install redux-thunk
# 或者用yarn
yarn add redux-thunk

第二步：在index.js中配置Store #

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 引入你的根Reducer
import App from './App'; // 你的根组件

// 创建Store时应用Thunk中间件
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

关键问题解释 #

• 原来的Action Creator写法错误：Redux不会自动把dispatch传给你的函数，必须让函数返回一个新的函数，Thunk中间件才会拦截这个Action，并把dispatch注入进去。
• 必须显式应用Thunk中间件：默认的Redux Store只能处理plain object类型的Action，Thunk中间件扩展了Store的能力，让它可以处理返回函数的Action Creator。
• 补充的状态细节：在success和failure时都更新isLoading为false，避免页面一直处于加载状态；同时在failure时传递错误信息，方便后续在Reducer或组件中处理错误提示。

内容的提问来源于stack exchange，提问作者tcoulson