React & Redux: How to update the filters after adding and editing a form
This is my last project at flatiron. I chose to create a program to assist with cooking since it is one of my favorite hobbies and personal interests.
Have you ever watched a cooking video on the internet and thought “I would love to cook this later? Organize meals by category and ethnicity”
Bite Bank is a media storage platform dedicated to the culinary arts. It allows for quick reference to cooking videos of interest by keeping a record of those you would like to flag and return to in the future. Easily searchable by name, category, and ethnicity…Bite Bank is a useful tool for any chef!
I had a problem that I found in my project and I would like to share how I created and updated my form. I was struggling to get the filters for category and ethnicity to automatically update.
First I updated the form and then clicked “Filter by” to select a category. I changed the blank space to chicken in the form, but as you can see, when I clicked on category it did not update like it was suppose to. I had to manually refresh the page in order to update category and ethnicity.
My problem was when I updated all data (PATCH) the reason that it was not updating the category and ethnicity was I kept tracking category and ethnicity in the state. Therefore, when I updated (PATCH) there was no data sent to category and ethnicity. This is how I solved the problem. I added dispatch in the actions as below.
state = { recipes: [], categories: [], areas: [], loading: false }dispatch({ type: "LOAD_CATEGORIES" });dispatch({ type: "LOAD_AREAS" });
Let me explain more about what “LOAD_CATEGORIES” and “LOAD_AREAS” are. Both of these cases grab the unique data from categories and areas array that we keep tracking. So after updating and adding information in the form, it will automatically be recognized in category and ethnicity filters.
