使用Redux-thunk处理异步操作的组件结构？

Redux-thunk 是一个 Redux 中间件，它允许你在 action creators 中编写异步逻辑。以下是使用 Redux-thunk 处理异步操作的组件结构示例：

1. 安装 Redux 和 Redux-thunk

首先，确保你已经安装了 redux 和 redux-thunk：

npm install redux redux-thunk

2. 创建 Redux Store

在你的应用入口文件（例如 index.js 或 store.js）中，配置 Redux store 并应用 Redux-thunk 中间件：

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

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

export default store;

3. 定义 Action Creators

创建一个 action creator 文件（例如 actions.js），并在其中编写异步逻辑：

// actions.js
export const fetchDataRequest = () => ({
  type: 'FETCH_DATA_REQUEST'
});

export const fetchDataSuccess = (data) => ({
  type: 'FETCH_DATA_SUCCESS',
  payload: data
});

export const fetchDataFailure = (error) => ({
  type: 'FETCH_DATA_FAILURE',
  payload: error
});

export const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest());
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch(fetchDataSuccess(data)))
      .catch(error => dispatch(fetchDataFailure(error)));
  };
};

4. 创建 Reducer

创建一个 reducer 文件（例如 reducers.js），用于处理 action 并更新 state：

// reducers.js
const initialState = {
  data: [],
  loading: false,
  error: null
};

const dataReducer = (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, error: null };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default dataReducer;

5. 组合 Reducers

如果你有多个 reducer，可以使用 combineReducers 来组合它们：

// rootReducer.js
import { combineReducers } from 'redux';
import dataReducer from './dataReducer';

const rootReducer = combineReducers({
  data: dataReducer
});

export default rootReducer;

6. 在组件中使用

在你的 React 组件中，使用 useDispatch 和 useSelector 来分发 action 并获取 state：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const DataComponent = () => {
  const dispatch = useDispatch();
  const { data, loading, error } = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataComponent;