如何在reducer中过滤数组object而不影响实际的state

Question

I'm trying to filter an object from an array (redux reducer),

const data = [
    {id: 0, name: 'Printed Men black Shirt', itemCode: 1000, price: 530, currency: '$', manufacturer: 'ColorWorld'},
    {id: 1, name: 'Denim blue white shorts', itemCode: 1001, price: 230, currency: '$', manufacturer: 'ColorWorld'},
    {id: 2, name: 'Solid Men blue pants', itemCode: 1003, price: 1530, currency: '$', manufacturer: 'Mecrono Hipli'},
    {id: 3, name: 'Checkerd Men Blue Shorts', itemCode: 1300, price: 2530, currency: '$', manufacturer: 'Mecrono Hipli Mini'},
    {id: 4, name: 'Self Designed Pant', itemCode: 1056, price: 130, currency: '$', manufacturer: 
];

export const listProducts = (state = data, action) => {
    switch(action.type){
        case LIST_ALL_PRODUCTS: {
            return state;
        }

        case SEARCH_PRODUCT: {
           return state.filter((e)=> e.name.includes(action.payload))
        }

        default: 
        return state
    }
}

This reducer always updates the actual state. Why this is not making a new filtered array?

Answer 1

You can solve your issue by converting the state data structure to an object and maintain a separate property in redux state say filteredData .

Like this

const initialState = {
  data: [
    {
      id: 0,
      name: 'Printed Men black Shirt',
      itemCode: 1000,
      price: 530,
      currency: '$',
      manufacturer: 'ColorWorld',
    },
    {
      id: 4,
      name: 'Self Designed Pant',
      itemCode: 1056,
      price: 130,
      currency: '$',
      manufacturer: '',
    },
  ],
  filteredData: [],
}

export const listProducts = (state = initialState, action) => {
  switch (action.type) {
    case LIST_ALL_PRODUCTS: {
      return state
    }

    case SEARCH_PRODUCT: {
      return { ...state, filteredData: state.data.filter((e) => e.name.includes(action.payload)) }
    }

    default:
      return state
  }
}

Another option

Use single source of data in redux and do the filtering logic in the component itself. See sample demo here if it helps.

Answer 2

As I mentioned in the comment, you can also separately store the filter itself and do the filtering not in the reducer, but in the component:

Example reducers:

export const listProducts = (state = data, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export const productNameFilter = (state = "", action) => {
  switch (action.type) {
    case SEARCH_PRODUCT: {
      return action.payload.toLowerCase();
    }
    default:
      return state;
  }
};

// assuming root reducer is:
// combineReducers({ listProducts, productNameFilter })

In the productNameFilter reducer, the SEARCH_PRODUCT action's payload should contain the product name filter. Resetting the search filter is as simple as setting the state to '' .

Example component, using hooks:

const ProductList = () => {
  const products = useSelector((state) => state.listProducts);
  const productFilter = useSelector((state) => state.productNameFilter);

  const shownProducts = products.filter((product) =>
    product.name.toLowerCase().includes(productFilter.toLowerCase())
  );

  return (
    <ul>
      {shownProducts.map((p) => (
        <p key={p.id}>{p.name}</p>
      ))}
    </ul>
  );
};

or with connect :

const ProductList = ({ products, productFilter }) => {
  const shownProducts = products.filter((product) =>
    product.name.toLowerCase().includes(productFilter)
  );

  return (
    <ul>
      {shownProducts.map((p) => (
        <p key={p.id}>{p.name}</p>
      ))}
    </ul>
  );
};

export default connect(ProductList)((state) => ({
  products: state.listProducts,
  productFilter: state.productNameFilter,
}));