javascript - 如何将过滤器组件应用于我的产品

Question

再会，

我想将我的过滤器组件应用于我的产品。所以当用户点击选择选项时，他可以选择尺寸，只有选定尺寸的产品才会出现在屏幕上。我已经创建了逻辑，但我只是不知道如何应用它。

代码过滤器操作：

const Filterproducts = (products,size) => (dispatch) => {
    return dispatch({
        type:FILTER_PRODUCTS_BY_SIZE,
        payload: {
            size:size,
            items:size === ''? products: products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
        }
    })
}

代码FilterReducer：

function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
    
    switch (action.type){
        // case is like the if statement
        //getting product
        case PRODUCT_LIST_REQUEST:
            return{loading: true};
            // when products are loaded
        case PRODUCT_LIST_SUCCESS:
            return{loading:false, products: action.payload};
            //when err occurs
        case PRODUCT_LIST_FAIL:
            return{loading: false, error: action.payload};
        case FILTER_PRODUCTS_BY_SIZE:
                return{...state, filteredItems: action.payload.products, size: action.payload.size}
        default:
                return state
    }
}

代码过滤器组件：

import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Filterproducts} from '../../actions/productActions'

class Filter extends Component {
    constructor(){
        super()
        
        this.state = {

        }
    }

  
    render(){
        return(
            
            <div className="filter">

                <label>
                    Order:
                    <select>
                        <option value="lowest">Lowest to Highest</option>
                        <option value="highest">Highest to Lowest</option>
                    </select>
                </label>
            <label>
            Size:
            <select 
            className="size"
            onChange={(e)=> this.props.Filterproducts(this.props.products, e.target.value)}
            >
            <option value="">ALL</option>
            <option value="XS">XS</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 => ({
    products: state.products.items,
    size: state.products.size
})
export default connect(mapStateToProps,{Filterproducts})(Filter)

标签： javascriptreactjsreduxe-commerceproduct

Answer 1

这是一个例子。假设产品有名称。

const Filterproducts = (size) => (dispatch) => {
    return dispatch({
        type:FILTER_PRODUCTS_BY_SIZE,
        payload: {
            size,
        }
    })
}

---

 function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
    
    switch (action.type){
        // case is like the if statement
        //getting product
        case PRODUCT_LIST_REQUEST:
            return{loading: true};
            // when products are loaded
        case PRODUCT_LIST_SUCCESS:
            return{loading:false, products: action.payload};
            //when err occurs
        case PRODUCT_LIST_FAIL:
            return{loading: false, error: action.payload};
        case FILTER_PRODUCTS_BY_SIZE:
                 const { size } = action.payload
                 const filterProduct = size === ''? state.products: state.products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
                return{...state, filteredItems:[...filterProduct], size: action.payload.size}
        default:
                return state
    }
}

---

import React, { Component } from 'react'
                import {connect} from 'react-redux'
                import {Filterproducts} from '../../actions/productActions'
                
                class Filter extends Component {
                    render(){
                        return(
                            
                            <div className="filter">
                
                                <label>
                                    Order:
                                    <select>
                                        <option value="lowest">Lowest to Highest</option>
                                        <option value="highest">Highest to Lowest</option>
                                    </select>
                                </label>
                            <label>
                            Size:
                            <select 
                            className="size"
                            onChange={(e)=> this.props.Filterproducts(e.target.value)}
                            >
                            <option value="">ALL</option>
                            <option value="XS">XS</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                
                            </select>
                            </label>
                            { filteredItem.length && filteredItems.map( product => {
                                 return (<> {product.name} </>
                            }
                            </div>
                        )
                    }
                }
                
                const mapStateToProps = state => ({
                    filteredItems: state.filteredItems,
                })
                export default connect(mapStateToProps,{Filterproducts})(Filter)