Oof 🤦🏻‍♂️

If you've been following along with my last few blog posts you would remember that I was planning on adding Redux to my project to help with state management. Well, that was almost more than two weeks ago. I started a git branch to add redux to my project and man I am glad I did that...

I implemented the changes into my project on the new branch; added a store, separate folders for actions, reducers, etc. But when the time came to start storing state and creating actions for that state, I ran into several different problems. It wasn't just any old problems though... it was the kind that can get you stuck for days, perhaps weeks. If you ever find yourself in a similar situation, here's a few things you can do or consider!

Dig Deep 👷🏻‍♂️

As you might already know, the first thing you'll find yourself doing when you're stuck is to jump on that magical beast:

g o o g l e

At least that's the first thing I did! Whenever you're using google to start digging deep, make sure you have the right questions or searches in mind. In my case, I didn't simply google "why is redux not working." I had to really dig deep into my project and figure out why it wasn't working. Was I using redux incorrectly? Was I putting my functions and state in the right spots? This kind of evaluation and deep inspection on your code will help your google searches be more beneficial.

Researching is a skill just like any other. My years in high school and college helped me realize this when I had a research project. I needed good questions if I wanted to present good answers. Same thing applies for programming; make sure you understand the problem as much as possible before looking for answers.

Another crucial point here is to not just copy and paste whatever you find!! It can be certainly tempting, but that code you found wasn't made for your project. It's taken way out of it's context, so be sure to fully understand it's original context, how it works, and how it might be integrated into your project! I always try to see how someone else solved their problem, and see how I can implement the solution into my code, and its very rare that it could just be copied and pasted. Having this diligence will help your project stay healthy down the road, because who knows what blind copied code will do!

Ask for Help 🙋🏻‍♂️

This step should only be done after you've dug really really deep into your problem. We should never be afraid to ask for help, and by asking online we can help others who are in a similar situation. However, other programmers will only be able/willing to help you when you've done your part. You have got to dig deep into the problem and come up with the right questions. For instance, if I needed to know how to center a div, or how to implement a pull request to an API, what would happen if I put those kinds of questions on forums and chat rooms? Obviously people would either laugh or be annoyed, because those are questions that are very popular and the answers are out there if you just happen to take the time to look.

Chances are your problem is more complicated than those examples, but it still stands that you should do as much research and digging to see if someone else before you has had the same problem. By putting in the hard work and time, you will show others that you're not lazy, and you respect their time! So don't be too shy and raise that hand, but make sure you've already dug as deep as you can go.

Find Another Way 🛣

In my particular case, I didn't find any answers to my problems. I was really stuck; I dug real deep, I knew why redux wasn't working for my particular app, but I couldn't find any answers. After searching for about two weeks, I decided to cut my losses and take another route with my state management; instead of using redux I would simply pass the state down through props. This is what I was trying to avoid, but in the end it works just fine and will get the job done. I might come back and visit redux and use a combination of the two, for now though I will keep pressing forward with what I got.

This helped me learn an important lesson: flexibility. I had this rigid idea in my mind that since I would be working with a lot of state variables that I needed to work in redux. It was almost this concept of "this is the professional thing to do and this is what one should do in a situation like this," but in the end it proved to waste more time than saving time. I should have been looking for "what will work" instead of limiting my options to a particular state management. This is how programmers are truly creative; we want to find solutions to problems, and we must be stretched to look outside the box and to find those solutions!

Project Update

Since I have changed my way of solving this problem I have actually accomplished quite a bit! I have created a new page for the recipe input, as well as a separate page for the timer. With react-router-dom we are now able to change from page to page. Once I decided to pass state through props, I was able to make inputs on the recipe page with their own state that would update with the value entered on the input. After the user submits it, there is a function that runs the time entered, converts it to seconds, the puts that into our timer inputSeconds, and finally it goes to the next page with our timer ready to go! Here's the recipe component so far:

const Recipe = ({inputSeconds, setInputSeconds}) => {

  const history = useHistory();
  const [minValue, setMinValue] = useState(""); 
  const [secsValue, setSecsValue] = useState(""); 

  const updateTimerValue = () => {
    const totalMins = minValue * 60;
    const totalSecs = Number(totalMins) + Number(secsValue);
    setInputSeconds(totalSecs);
    routeChange();
  }

  const minInputHandler = (e) => {
    setMinValue(e.target.value);
  }

  const secsInputHandler = (e) => {
    setSecsValue(e.target.value);
  }

  const routeChange = () =>{ 
    let path = `/timer`; 
    history.push(path);
  }

  return (
    <RecipeContainer>
      <RecipeForm onSubmit={updateTimerValue}>
        <h1>Recipe</h1>
        <RecipeInput>
          <input id="mins" type="number" value={minValue} onChange={minInputHandler} min="0" max="59" placeholder="0" required />
          <p>:</p>
          <input id="secs" type="number" value={secsValue} onChange={secsInputHandler} min="0" max="59" placeholder="00" required />
        </RecipeInput>
          <StartButton type="submit" >
            Start
          </StartButton>
      </RecipeForm>
    </RecipeContainer>
  )
};

This works perfectly after resolving a few bugs, so I merged the branch to the main source code and you can see the live results here, as well as the Github repo here! The next steps involve adding more input values for the other developing processing stages, as well as an intermediary interval between the stages. Challenges here would be handling all the state that would be involved, and whether it should be done on one page or navigate to another page for each component. Keep an eye out here to see what happens next! 😉

Steve