面试题：React结合Redux实现复杂条件渲染场景

Question

假设有一个电商产品展示页面，有不同类型的商品（服装、电子产品等），每个商品有不同的属性。你需要使用React和Redux来实现根据用户在侧边栏选择的商品类型，动态展示符合该类型的商品列表。请描述整体的实现思路，包括Redux的状态结构设计、action和reducer的编写，以及如何在React组件中利用这些状态管理来进行条件渲染。

Answer 1

1. Redux状态结构设计

在Redux的状态树中，我们至少需要两个部分：

• selectedProductType：用于存储用户在侧边栏选择的商品类型，初始值可以设为一个默认类型，比如null 或某个常见商品类型。

{
  selectedProductType: null
}

• products：一个数组，包含所有不同类型的商品数据。每个商品对象应包含能标识其类型的属性（如type）以及其他商品属性。

{
  products: [
    { id: 1, type: '服装', name: 'T恤', price: 50 },
    { id: 2, type: '电子产品', name: '手机', price: 2000 }
  ]
}

2. Action编写

• 选择商品类型的Action：
  • Action类型常量：

const SELECT_PRODUCT_TYPE = 'SELECT_PRODUCT_TYPE';

• Action创建函数：

export const selectProductType = (type) => ({
  type: SELECT_PRODUCT_TYPE,
  payload: type
});

3. Reducer编写

const initialState = {
  selectedProductType: null,
  products: []
};

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case SELECT_PRODUCT_TYPE:
      return {
      ...state,
        selectedProductType: action.payload
      };
    default:
      return state;
  }
};

export default productReducer;

4. 在React组件中利用状态管理进行条件渲染

• 侧边栏组件（Sidebar.js）：
  • 引入selectProductType action创建函数。
  • 通过useDispatch钩子派发selectProductType action。

import React from'react';
import { useDispatch } from'react-redux';
import { selectProductType } from './actions';

const Sidebar = () => {
  const dispatch = useDispatch();
  const handleTypeChange = (type) => {
    dispatch(selectProductType(type));
  };

  return (
    <div>
      <button onClick={() => handleTypeChange('服装')}>服装</button>
      <button onClick={() => handleTypeChange('电子产品')}>电子产品</button>
    </div>
  );
};

export default Sidebar;

• 商品展示组件（ProductList.js）：
  • 引入useSelector钩子获取Redux状态。
  • 根据selectedProductType过滤products数组，展示符合类型的商品。

import React from'react';
import { useSelector } from'react-redux';

const ProductList = () => {
  const { selectedProductType, products } = useSelector(state => state);
  const filteredProducts = selectedProductType 
  ? products.filter(product => product.type === selectedProductType) 
    : products;

  return (
    <div>
      {filteredProducts.map(product => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

• 在App.js中组合组件：

import React from'react';
import Sidebar from './Sidebar';
import ProductList from './ProductList';

const App = () => {
  return (
    <div>
      <Sidebar />
      <ProductList />
    </div>
  );
};

export default App;