reactjs - I can't figure out how to use visibilityFilters in react redux todo app

Question

I have a todo app that does all 4 crud operations but I can't filter them based on their current status here's the app on codesandbox.

import { SET_VISIBILITY_FILTER } from "../actionTypes";

const initialState = {
  filters: ["SHOW_ALL"]
};

const visibilityFilter = (state = initialState, { type, payload }) => {
  switch (type) {
    case SET_VISIBILITY_FILTER:
      return { payload };
    default:
      return state;
  }
};

export default visibilityFilter;

Any explanations will be appreciated.

I have also checked other react redux todo app github repos but most of them are old and it didn't look like they were writing in the best possible way, so I am trying to find a better way (and so far failing at it)

Answer 1

A few issues

1. filters is an array in the initial state, but you send single values there after in your action, and you also use it a single value when filtering with it.

2. you expect payload in your reducer but the data you dispatch does not wrap things in payload

   dispatch({
      type: SET_VISIBILITY_FILTER,
      filter
    });
   

3. in continuation to the above you should use the already defined action setFilter for setting a filter, which correctly wrap the data in a payload property.

fixing these 3 issues, you get https://codesandbox.io/s/problems-with-redux-forked-hv36h which is working as intended.