Redux helper function to check if a value is in the store

Question

I have a filter panel where the user can select different color filters:

// ColorButton.jsx
function ColorButton({ color }) {

 const handleFilterSelected = ({ id }) => {
    dispatch(applyFilter({ type: "colors", value: id }));
  };

  return (
    <div className="color-button" onClick={() => handleFilterSelected(color)}>
      {isFilterSelected({ type: "colors", value: color.id }) ? "yay" : "nay"}
    </div>
  );
}

The selected filters are stored in the redux store and the isFilterSelect function looks like this:

// redux/utils/filter.utils.js
export const isFilterSelected = ({ type, value }) => {
  const {
    filters: { applied }
  } = store.getState();

  return applied
    .filter((f) => f.type === type)
    .map((f) => f.value)
    .includes(value);
};

The issue is that the check runs before a selected filter is added to the applied array.

As a more general question - is it even a good idea to have "helper" functions that depend on the redux store?

Answer 1

Your helper function there should be written as a selector that gets the current state, and you should be using useSelector instead of store.getState manually, as that will update your component when the selector value changes.

function ColorButton({ color }) {
  const isSelected = useSelector(state => isFilterSelected(state, { type: "colors", value: color.id }));
  return (
    <div className="color-button">
      {isSelected ? "yay" : "nay"}
    </div>
  );
}


// redux/utils/filter.utils.js
export const isFilterSelected = (state, { type, value }) => {
  return state.filters.applied
    .filter((f) => f.type === type)
    .map((f) => f.value)
    .includes(value);
};