使用Redux時過濾器功能不起作用

我目前正在使用一個使用 React 和 Redux、Node 的小型購物車專案我構建了按大小和排序過濾產品的功能它作業正常但是當我使用 Redux 時過濾程序不再起作用我嘗試了很多

Store.js

import {createStore,compose,applyMiddleware} from 'redux'
import reducer from './Reducer/Reducer'
import reduxthunk from 'redux-thunk'

const initialState = {}
const enhancer = window.__REDUX_DEVTOOLS_EXTENTION_COMPOSE__ || compose
const store = createStore(reducer,initialState,enhancer(applyMiddleware(reduxthunk)))

export default store

型別.js

export const FETCH_PRODUCTS="FETCH_PRODUCTS"
export const FILTER_SIZE="FILTER_SIZE"
export const FILTER_SORT="FILTER_SORT"

ProductsActions.js

import { FETCH_PRODUCTS,FILTER_SIZE,FILTER_SORT} from './Types'

export const fetchProducts = () => {
    return (dispatch) => {
        fetch('/api/products').then(res => res.json()).then(data => {
            dispatch({
                type: FETCH_PRODUCTS,
                data: data
            })
        })
    }
}

export const filterdSize = (products,value) => {
    return (dispatch) => {
        let productClone = [...products]
        let newProduct = productClone.filter(p => p.size.indexOf(value) != -1)
        dispatch({
            type: FILTER_SIZE,
            data: {
                size: value,
                products: value == "ALL" ? products : newProduct
            }

        })
    }
}

export const filterdSort = (products, value) => {
    return (dispatch) => {
        let productClone = [...products];
        let newProduct = productClone.sort(function (a, b) {
            if (value == "lowest") {
                return a.price - b.price;
            } else if (value == "highest") {
                return b.price - a.price
            } else {
                return a.id < b.id ? 1 : -1
            }
        })
        dispatch({
            type:FILTER_SORT,
            data:{
                sort:value,
                products:newProduct
            }
        })
    }
}

ProductReducer.js

import {FETCH_PRODUCTS,FILTER_SIZE,FILTER_SORT} from '../Actions/Types'
const ProductReducer=(state={},action)=>{
    switch(action.type) {
        case FETCH_PRODUCTS:
            return {
                products:action.data,
                filterProducts:action.data
            }

        case FILTER_SIZE:
            return {
                ...state,
                size:action.data.size,
                filterProducts:action.data.products
            }

        case FILTER_SORT:
            return {
                ...state,
                sort: action.data.sort,
                filterProducts:action.data.products
            }

        default:
            return state
    }
}

export default ProductReducer

減速器.js

import ProductReducer from './ProductReducer'
import {combineReducers} from 'redux'

export default combineReducers({
    products:ProductReducer
})

過濾器.js

import React from 'react'
import './Filter.css'
import Flip from 'react-reveal/Flip';
import { connect } from 'react-redux'
import { filterdSize, filterdSort } from '../../store/Actions/Products'



const Filter = (props) => {
    return (
        <Flip left cascade>
            {props.filterProducts && <div className="filter-wrapper">
                <h2 className="filter-title">Filter</h2>
                <div className="nom-of-product">number of product {props.filterProducts.length} </div>
                <div className="filter-by-size">
                    <span className="span-title">Size</span>
                    <select className="filter-select" onChange={(e) => filterdSize(props.products, e.target.value)} value={props.size}>
                        <option value="ALL">ALL</option>
                        <option value="S">S</option>
                        <option value="M">M</option>
                        <option value="L">L</option>
                        <option value="XL">XL</option>
                        <option value="XXL">XXL</option>
                    </select>
                </div>
                <div className="filter-by-size">
                    <span className="span-title">Order</span>
                    <select className="filter-select" onChange={(e) => filterdSort(props.filterProducts, e.target.value)} value={props.sort}>
                        <option value="lastes">Lastes</option>
                        <option value="lowest">Lowest</option>
                        <option value="highest">Highest</option>
                    </select>
                </div>
            </div>}
        </Flip>
    )
}

export default connect((state) => {
    return {
        sort: state.products.sort,
        size: state.products.size,
        products: state.products.products,
        filterProducts: state.products.filterProducts
    }
}, { filterdSize, filterdSort })(Filter)

uj5u.com熱心網友回復：

您應該調度您的操作，而不僅僅是呼叫它們，以便您希望使用 react-redux 中的 useDispatch 獲取調度功能

const dispatch = useDispatch();

然后用 dispatch 呼叫你的動作 例如：

onChange={(e) => dispatch(filterdSize(props.products, e.target.value))}

標籤：javascript 反应 还原 反应还原

上一篇：如何使用jQuery更改動態創建的按鈕<span>中的文本？

下一篇：如何將兩個HTMLElement附加到一個Javascript中