无法在减速器中使用条件语句更改状态中数组的第二个值 --- Redux

Question

I kind of stuck at the moment. I trying to pass in a boolean value into the action that will then be used a case (FILTER_SIZE) within the reducer which either sets the value the displayed_clothing array to elements with the same sizeID or empties the displayed_clothing array which causes my Item page to revert back to display clothing items from the clothing array within stated instead of the filtered items in displayed_clothing.

It seems that the filtered_clothes is not changing its value after the if-else statement based on the console.logs that I have. Note: I made filtered_clothes into a const but got an invalid assignment error during the if-else statement so I used let instead. (To be honest, Im not sure why it didn't work as I did something similar in the BUY ITEMS case using a const instead)

ItemGrid.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { addITEM, addFAVORITE, filterSIZE } from '../actions';
// import Slider from 'react-rangeslider'
import '../styles.css';
// import 'react-rangeslider/lib/index.css'


class ItemGrid extends Component {
  constructor(props){
    super(props);

    this.state = {
      checked: false
    }

    this.openSearchBar = this.openSearchBar.bind(this);
    this.addFavorite = this.addFavorite.bind(this);
    this.addToCart = this.addToCart.bind(this);
    this.filterSize = this.filterSize.bind(this);

  }

  openSearchBar() {
    this.setState({showSearchBar: !this.state.showSearchBar});
  }

  addFavorite = (event, item) => {
    this.props.addFAVORITE(item);
  }

  addToCart = (event, item) => {
    this.props.addITEM(item);
  }

  filterSize = (event, size, checked_status) => {
    checked_status = !checked_status;
    console.log('filterSize');
    this.setState({checked: checked_status});
    event.preventDefault();

    console.log(checked_status)
    this.props.filterSIZE(size, checked_status);
  }

  handleChangeStart = () => {
    console.log('Change event started')
  };

  handleChange = value => {
    this.setState({
      value: value
    })
  };

  handleChangeComplete = () => {
    console.log('Change event completed')
  };

  renderClothing(){
    return this.props.clothing.map((item) => {
      return(
        <div className="item-product" key={item.id}>
          <img className="item" src={item.imgSrc} alt="clothing item" />
          <i className="fa fa-heart fav-icon pointer" aria-hidden="true" onClick={(event) => this.addFavorite(event, item)}></i>
          <p className="item-name">{item.name}</p>
          <p className="item-price">${item.price}</p> <button className="addtoCart_btn" onClick={(event) => this.addToCart(event, item)}>Add</button>
        </div>
      )
    }
  )
}



  render(){
    console.log('props')
    console.log(this.props.clothing)
    return(
      <div id="item-area">
        <div id="side-menu">
          <h3>Filters</h3>
          <div className="size-box">
            <h5>Size:</h5>
            <ul>
              <li className="">
                <a href="/item" onClick={(event) => this.filterSize(event, 1, this.state.checked)}>
                  <label className="container">XS
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">S
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">M
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">L
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a href="/item">
                  <label className="container">XXL
                    <input type="checkbox" />
                    <span className="checkmark"></span>
                  </label>
                </a>
              </li>
            </ul>
          </div>
          <div className="color-box">
            <h5>Color:</h5>
            <ul className="color-list">
              <li className="swatch color-swatch-black pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-blue pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-red pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-nude pointer">
                  <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-white pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-grey pointer">
                <a href="/item">  </a>
              </li>   <br />
              <li className="swatch color-swatch-purple pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-brown pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-yellow pointer">
                <a href="/item">  </a>
              </li>  <br />
              <li className="swatch color-swatch-orange pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-pink pointer">
                <a href="/item">  </a>
              </li>
              <li className="swatch color-swatch-green pointer">
                <a href="/item">  </a>
              </li>  <br />
            </ul>
          </div>
          <div className="price-range">
            <h5 className="">Price:</h5>
            <ul className="prices">
              <li><a href="/item" className="pointer">$10</a></li>
              <li><a href="/item" className="pointer">$20</a></li>
              <li><a href="/item" className="pointer">$30</a></li>
              <li><a href="/item" className="pointer">$40</a></li>
              <li><a href="/item" className="pointer">$50</a></li>
              <li><a href="/item" className="pointer">$100</a></li>
            </ul>
          </div>
        </div>
        <div id="item-grid">
          {this.renderClothing()}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('State in ItemGrid')
  console.log(state)
  console.log(state.apps.clothing)
  console.log(state.apps.displayed_clothing)
  if (state.apps.displayed_clothing === undefined | state.apps.displayed_clothing.length === 0){
    return {clothing: state.apps.clothing}
  };
  return{clothing: state.apps.displayed_clothing}
}

export default connect(mapStateToProps, {addITEM, addFAVORITE, filterSIZE})(ItemGrid);

app.js (Reducer file)

const initialState = {
      search: 'hi',
      act: {
        cart: [],
        history: [],
        favorites: []
      },
      clothing: [ // XS: 1
        {id: 1, name: "Light Blue Dress", price: 20, imgSrc: "/tops/1.jpg", size: 1},
        {id: 2, name: "Nude Dress with Blue Floral Design", price: 20, imgSrc: "/tops/4.jpg"},
        {id: 3, name: "White Dress with Gold Design", price: 15, imgSrc: "/tops/5.jpg"},
        {id: 4, name: "Brown Button Shirt", price: 15, imgSrc: "/tops/6.jpg", size: 1},
        {id: 5, name: "Yellow Dress", price: 27, imgSrc: "/tops/7.jpg"},
        {id: 6, name: "White Dress with Flower Design", price: 40, imgSrc: "/tops/8.jpg"},
        {id: 7, name: "White Blossom Mary shirt", price: 13, imgSrc: "/tops/9.jpg", size: 1},
        {id: 8, name: "White Dress with Black Design", price: 22, imgSrc: "/tops/3.jpg"},
        {id: 9, name: "White Floral Long Sleeve Dress", price: 27, imgSrc: "/tops/10.jpg"}
      ],
      displayed_clothing: [],
};

const appsReducer = (state = initialState, action) => {
  console.log('inside reducer');
  console.log(state.act);



  switch(action.type) {
    case 'ADD_CART':
      console.log('inside add case');

      console.log('Action:');
      console.log(action.payload);
      console.log('State:');
      console.log(state);
      console.log('Cart:');
      console.log(state.act.cart);

      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.concat(action.payload)
        }
      };

    case 'DELETE_CART_ITEM':
      console.log('inside delete case');
      const delID = action.payload.id;

      return {
        ...state,
        act: {
          ...state.act,
          cart: state.act.cart.filter(state => state.id !== delID)
        }
      };

    case 'BUY_ITEMS':
      console.log('inside buy items case');
      console.log(action.payload);
      const emptyArray = [];

      // Otherwise, this is the one we want - return an updated value
      return {
        ...state,
        act: {
          ...state.act,
          history: state.act.history.concat(action.payload),
          cart: state.act.history.concat(emptyArray)
        }
      };

      case 'ADD_FAVORITE':
        console.log('inside add favorite case');

        console.log('Action:');
        console.log(action.payload);
        console.log('State:');
        console.log(state);

        return {
          ...state,
          act: {
            ...state.act,
            favorites: state.act.favorites.concat(action.payload)
          }
        };

        case 'DELETE_FAVORITE':
          console.log('inside delete case');
          const delFavID = action.payload.id;

          return {
            ...state,
            act: {
              ...state.act,
              favorites: state.act.favorites.filter(state => state.id !== delFavID)
            }
          };

          case 'FILTER_SIZE':
            console.log('inside filter size case');
            const sizeID = action.payload.id;
            let filtered_clothes = [];

            console.log('checked_status');
            console.log(action.payload.checked_status);

            // When checkbox is unchecked
            if (action.payload.checked_status === false){
              console.log('if statement')
               filtered_clothes = state.displayed_clothing.concat(filtered_clothes)
               console.log(filtered_clothes);
            } else {
              console.log('else statement');
              filtered_clothes = state.clothing.filter(item => item.size === sizeID);
            }

            console.log('filtered_clothes')
            console.log(filtered_clothes);


            return {
              ...state,
              displayed_clothing: filtered_clothes
            };




    default:
      return state;
  }
}

export const updateCartPrice = (state) => {
  let final_total = 0;

  state.apps.act.cart.map((cart_item) => {
      console.log('itemPrice');
      console.log(cart_item.price);

      final_total += cart_item.price;
      console.log('final_total')
      console.log(final_total)
      }
    )

  console.log('final_total in updateCartPrice')
  console.log(final_total)

  return final_total
}

export default appsReducer

action.js

import v4 from 'node-uuid';

// Add item to cart
export const addITEM = item => {

  return{
    type: 'ADD_CART',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};

export const deleteCART_ITEM = item => {

  return{
    type: 'DELETE_CART_ITEM',
    payload: {
      id: item.id,

    }
  };
};

// let order_id = 1;

// Add items to history
export const purchaseITEMS = (items, date) => {

  return{
    type: 'BUY_ITEMS',
    payload: {
      id: v4(),
      items: items,
      date: date
    }
  };
};

// Add item to favorite
export const addFAVORITE = item => {

  return{
    type: 'ADD_FAVORITE',
    payload: {
      id: item.id,
      name: item.name,
      price: item.price,
      imgSrc: item.imgSrc
    }
  };
};

export const deleteFAVORITE = item => {

  return{
    type: 'DELETE_FAVORITE',
    payload: {
      id: item.id,

    }
  };
};

export const filterSIZE = (size, checked_status) => {
  return{
    type: 'FILTER_SIZE',
    payload: {
      id: size,
      checked_status: checked_status
    }
  };
};

If you have any suggestions on what I should try, would appreciate it. I've banging my head on the wall with this one trying to figure it out.

Thanks!

Answer 1

Figured out what I did wrong. I went too convoluted with the way went about the if-else statement. Basically, got rid of the else state and pasted as code for the if. So in this case if the box is checked, then we display out the filtered clothes. Otherwise, we assign empty array (initial value of filtered_clothes) to displayed_clothes.

In my ItemGrid.js, there is a conditional statement that basically displays either 'displayed_clothes' array (if it has a value) or the regular clothing array.

  case 'FILTER_SIZE':
    console.log('inside filter size case');
    const sizeID = action.payload.id;
    let filtered_clothes = [];

    console.log('checked_status');
    console.log(action.payload.checked_status);

    // When checkbox is unchecked
    if (action.payload.checked_status === true){
       console.log('if statement')
       filtered_clothes = state.clothing.filter(item => item.size === sizeID);
       console.log(filtered_clothes);
     }

    console.log('filtered_clothes')
    console.log(filtered_clothes);


    return {
      ...state,
      displayed_clothing: filtered_clothes
    };