如何在React Redux中按大小过滤产品

如何解决如何在React Redux中按大小过滤产品

我是React和Redux的新手。我一直在尝试使用Redux过滤产品的某些数据，但是我对自己的操作方式不满意。问题是：当页面重新加载时，产品不呈现，仅当我单击选项之一时才呈现。有没有好的清洁方法？我非常感谢您的帮助。谢谢：）

这是产品数据

import faker from 'faker';

const PRODUCTS_DATA = [
    {
        id: 1,categorie: 'men',size: 'S',name: faker.commerce.productName(),imgUrl: 'http://images.asos-media.com/products/asos-design-oversized-longline-shirt-with-placement-floral-print-in-white/20232840-1-white?$n_480w$&wid=476&fit=constrain',price: faker.commerce.price()
    },{
        id: 2,size: 'M',imgUrl: 'http://images.asos-media.com/products/calvin-klein-jeans-asos-exclusive-sweat-shorts-with-white-noise-back-pocket-logo-in-black/20558434-1-ckblack?$n_480w$&wid=476&fit=constrain',{
        id: 33,size: 'L',imgUrl: 'http://images.asos-media.com/products/asos-design-skinny-western-denim-jacket-in-black/12887167-1-black?$n_480w$&wid=476&fit=constrain',{
        id: 34,size: 'XL',price: faker.commerce.price()
    }
   
]

export default PRODUCTS_DATA;

这是action.js。因此，如果用户在选项值中选择的尺寸与产品尺寸相同，则在此我将过滤产品尺寸。如果是，它将返回具有所选尺寸的产品列表，否则返回所有产品。

import ProductsActionTypes from './products.types';


export const filterProductsBySize = (products,size) => ({
    type: ProductsActionTypes.FILTER_PRODUCTS_BY_SIZE,payload: {
        size: size,items: size === "" ? products : products.filter(product => product.size === size)
    }
});

这是reducer.js


import PRODUCTS_DATA from '../../components/Product-data';
import ProductsActionTypes from './products.types';

const INITIAL_STATE = {
    items: PRODUCTS_DATA,filteredItems: []
}

const productsReducer = (state = INITIAL_STATE,action) => {
    switch (action.type) {

        case ProductsActionTypes.FILTER_PRODUCTS_BY_SIZE:
            return {
                ...state,filteredItems: action.payload.items
            }

        default:
            return state;

    }
}
export default productsReducer;

过滤器组件

import React from 'react';

import { connect } from 'react-redux';

import {filterProductsBySize} from '../../redux/products/products.actions';

const ProductFilters = (props) => {
    return (
        <div>
            <div className="jumbotron">
                <div>
                    <label>
                        FILTER BY SIZE
                        <select
                            value={props.size}
                            onChange={(e) => {
                                props.dispatch(filterProductsBySize(props.products,e.target.value))
                            }}
                        >
                            <option value="">ALL</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                        </select>
                    </label>
                </div>
            </div>
        </div>
    )
}

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

export default connect(mapStateToProps)(ProductFilters);

这里是重新渲染产品的组成部分

import React from 'react';

import { connect } from 'react-redux';

import Card from '../../Card';
import ProductFilters from '../../product-filters/ProductFilters';

const MensPage = (props) => {
    return (
        <div className="container">
            <h1>Men Page</h1>
            <ProductFilters />
            <div className="row">
                {
                    props.products.filter(product => product.categorie === 'men')
                        .map(product => <Card key={product.id} product={product} />)
                }
            </div>
        </div>
    )
};

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

export default connect(mapStateToProps)(MensPage);

解决方法

在“产品”呈现组件中，您选择 products.filteredItems ，它最初是一个空数组。

正确的方法-

实际-

export const filterProductsBySize = (products,size) => ({
    type: ProductsActionTypes.FILTER_PRODUCTS_BY_SIZE,payload: {
        size: size,}
}

在减速器中

const INITIAL_STATE = {
    items: PRODUCTS_DATA,}

case ProductsActionTypes.FILTER_PRODUCTS_BY_SIZE:
       return state.items.filter(item => item.size === action.payload.size)

您永远不会将大小保存到您的状态，也永远不会从状态中选择大小，因此在代码<select value={props.size}中props.size始终未定义。您可以将尺寸保存为redux状态，并使用选择器过滤产品。

您永远不应将副本或计算结果保存为redux状态，并且由于过滤后的产品是对产品的计算，因此您应该使用选择器。

这是一个可行的示例：

const {
  Provider,useSelector,connect,} = ReactRedux;
const { createStore,applyMiddleware,compose } = Redux;
const { createSelector } = Reselect;

const initialState = {
  items: [
    { size: 'S',id: 1 },{ size: 'M',id: 2 },{ size: 'L',id: 3 },{ size: 'XL',id: 4 },id: 5 },],size: '',};
//action types
const CHANGE_SIZE = 'CHANGE_SIZE';
//action creators
const changeSize = (size) => ({
  type: CHANGE_SIZE,payload: size,});
const reducer = (state,{ type,payload }) => {
  if (type === CHANGE_SIZE) {
    return { ...state,size: payload };
  }
  return state;
};
//selectors
const selectItems = (state) => state.items;
const selectSize = (state) => state.size;
const createSelectFilteredItems = (size) =>
  createSelector(
    [selectItems,selectSize],(items,filterSize) =>
      size
        ? items.filter(({ size }) => size === filterSize)
        : items
  );
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,initialState,composeEnhancers(
    applyMiddleware(() => (next) => (action) =>
      next(action)
    )
  )
);
const ProductFilters = ({ size,changeSize }) => {
  return (
    <div>
      <label>
        FILTER BY SIZE
        <select
          value={size}
          onChange={(e) => {
            changeSize(e.target.value);
          }}
        >
          <option value="">ALL</option>
          <option value="S">S</option>
          <option value="M">M</option>
          <option value="L">L</option>
          <option value="XL">XL</option>
        </select>
      </label>
    </div>
  );
};

const mapStateToProps = (state) => ({
  size: selectSize(state),});

const ProductFiltersContainer = connect(mapStateToProps,{
  changeSize,})(ProductFilters);
const ProductList = () => {
  const size = useSelector(selectSize);
  const selectFilteredItems = React.useMemo(
    () => createSelectFilteredItems(size),[size]
  );
  const filteredProducts = useSelector(selectFilteredItems);
  return (
    <ul>
      {filteredProducts.map((p) => (
        <li key={p.id}>
          <pre>{JSON.stringify(p,undefined,2)}</pre>
        </li>
      ))}
    </ul>
  );
};
const App = () => (
  <div>
    <ProductFiltersContainer />
    <ProductList />
  </div>
);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<div id="root"></div>

有关如何使用选择器的更多文档，请参见here

如何在React Redux中按大小过滤产品

如何解决如何在React Redux中按大小过滤产品

解决方法

相关推荐