正文

新手必看：React Redux 异步数据加载实战案例详解

/0 浏览量
0601

在React开发中，Redux是一个强大的状态管理库，它可以帮助我们管理应用的状态，而异步数据加载是现代应用中常见的需求。本文将带您通过一个实战案例，详细了解如何在React Redux中实现异步数据加载。

案例背景

假设我们正在开发一个电商网站，页面中需要展示商品列表。商品数据从后端API获取，且数据加载是异步的。我们将使用React和Redux来实现这一功能。

准备工作

在开始之前，请确保您的开发环境已安装以下依赖：

  • React
  • Redux
  • React-Redux
  • axios

案例实现

1. 创建项目

首先，创建一个新的React项目：

npx create-react-app my-app
cd my-app

2. 安装依赖

安装Redux和React-Redux：

npm install redux react-redux

安装axios：

npm install axios

3. 设置Redux

3.1 创建store

在src目录下创建store.js文件：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

3.2 创建reducers

在src目录下创建reducers文件夹，并创建rootReducer.js文件：

import { combineReducers } from 'redux';
import productsReducer from './productsReducer';

export default combineReducers({
  products: productsReducer
});

在src/reducers/productsReducer.js文件中创建商品reducer：

const initialState = {
  items: [],
  loading: false,
  error: null
};

const productsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_PRODUCTS_REQUEST':
      return {
        ...state,
        loading: true,
        error: null
      };
    case 'FETCH_PRODUCTS_SUCCESS':
      return {
        ...state,
        items: action.payload,
        loading: false
      };
    case 'FETCH_PRODUCTS_FAILURE':
      return {
        ...state,
        error: action.payload,
        loading: false
      };
    default:
      return state;
  }
};

export default productsReducer;

4. 创建Actions

在src目录下创建actions文件夹，并创建productsActions.js文件：

import axios from 'axios';

export const fetchProductsRequest = () => ({
  type: 'FETCH_PRODUCTS_REQUEST'
});

export const fetchProductsSuccess = products => ({
  type: 'FETCH_PRODUCTS_SUCCESS',
  payload: products
});

export const fetchProductsFailure = error => ({
  type: 'FETCH_PRODUCTS_FAILURE',
  payload: error
});

export const fetchProducts = () => async dispatch => {
  dispatch(fetchProductsRequest());
  try {
    const response = await axios.get('https://api.example.com/products');
    dispatch(fetchProductsSuccess(response.data));
  } catch (error) {
    dispatch(fetchProductsFailure(error.message));
  }
};

5. 创建Components

5.1 ProductsContainer

在src目录下创建components文件夹，并创建ProductsContainer.js文件：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchProducts } from '../actions/productsActions';
import Products from '../components/Products';

const ProductsContainer = ({ products, fetchProducts }) => {
  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]);

  return <Products products={products} />;
};

const mapStateToProps = state => ({
  products: state.products.items
});

const mapDispatchToProps = {
  fetchProducts
};

export default connect(mapStateToProps, mapDispatchToProps)(ProductsContainer);

5.2 Products

在src/components文件夹下创建Products.js文件：

import React from 'react';
import Product from './Product';

const Products = ({ products }) => {
  return (
    <div>
      {products.map(product => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
};

export default Products;

5.3 Product

在src/components文件夹下创建Product.js文件：

import React from 'react';

const Product = ({ product }) => {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p>{product.price}</p>
    </div>
  );
};

export default Product;

6. 使用Redux

在src/App.js文件中引入store并使用Provider组件包裹整个应用：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ProductsContainer from './components/ProductsContainer';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>Products</h1>
        <ProductsContainer />
      </div>
    </Provider>
  );
};

export default App;

总结

通过以上实战案例，我们学习了如何在React Redux中实现异步数据加载。在实际开发中，您可以根据自己的需求进行相应的调整和优化。希望这篇文章能对您有所帮助！

-- 展开阅读全文 --