Home page > Camis W24 > Redux

Camis logo

Camis - Redux

Since we didn't use Redux Toolkit, we had to go more in-depth with our code and make sure that, when looking for resources, we weren't trying anything specific to Redux Toolkit. I went over parts 1-3 of Redux Fundamentals as a way of getting a better grasp on how exactly Redux works.




Types

Depending on what changes you want to make to the structure of the state, you may have to introduce a new type. I wanted to create a dictionary, so I created the following interface:

    export interface customDictionary {
      [key: number]: someData[];
    }

This is a relatively simple structure. The key would be something unique, which would then hold a list of some data specific to that key. I used a similar custom dictionary as a reference.




Hooks, Reducers, Actions

React components would call hooks to interact with Redux. For my example, let's call the hook useSomeData.tsx. The related .reducers.ts and .actions.ts files (someData) had to be modified alongside this. Or rather, when I changed the reducers and actions, I had to update the hook.

I would say these changes are rather straightforward. It's not that implementing the changes is simple, but rather that once you understand and know what you want to change, you should be able to do so successfully. Looking at relevant (and similar work) helped me understand how everything works together.

Since I introduced a dictionary, I had to understand how to change a value within an array in Redux. Thankfully, I had a pull request and a simpler example in Stack Overflow to reference (How to update a single item inside a specific array in Redux).




Components

Now for the React components that call the hook you changed. For the most part, this is making any necessary changes to eliminate errors you introduced. You may have to change variable types or parameters to methods, but it's pretty logical.