在redux thunk分派后从商店返回promise

Redux Thunk 是 Redux 的一个中间件，它允许你在 action creators 中编写异步逻辑。当使用 Redux Thunk 时，action creators 可以返回一个函数，而不是一个普通的 action 对象。这个函数接收 dispatch 和 getState 作为参数，使得你可以在函数体内执行异步操作，并在操作完成后使用 dispatch 分派一个普通的 action。

基础概念

Redux Thunk 的核心思想是将异步逻辑从组件中抽离出来，放到 action creators 中，使得组件只需要关心如何触发 action，而不需要知道这些 action 是如何处理异步操作的。

优势

代码组织：将异步逻辑放在 action creators 中，使得组件代码更加简洁，易于维护。
可测试性：分离了组件和异步逻辑，使得单元测试更加容易。
灵活性：可以自由地处理各种异步操作，如 API 请求、定时器等。

类型

Redux Thunk 主要处理的是返回 Promise 的异步操作。

应用场景

当你需要在 Redux 中处理异步操作时，如从服务器获取数据，Redux Thunk 是一个很好的选择。

示例代码

// 安装 redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// Reducer
const initialState = {
  data: null,
  loading: false,
  error: null
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

// Action Creator
function fetchData() {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    return fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
}

// 创建 store
const store = createStore(reducer, applyMiddleware(thunk));

// 使用 dispatch 触发异步操作
store.dispatch(fetchData());

遇到的问题及解决方法

问题：为什么从商店返回的 Promise 没有被解决？

原因：

未正确安装或应用 Redux Thunk 中间件：确保你已经安装了 redux-thunk 并在创建 store 时应用了它。
未正确返回 Promise：确保你的 action creator 返回了一个函数，并且这个函数内部正确地返回了一个 Promise。

解决方法：

检查 Redux Thunk 是否已正确安装和应用：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

确保 action creator 返回一个函数，并且这个函数内部返回一个 Promise：

function fetchData() {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    return fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
}