Using Redux For the First Time: A Basic Set Up

For my final project, I knew that many of my components would need access to the same state. We had only briefly covered Redux at the end of the last phase but I knew how helpful it would be in managing some of my state values. Plus, I wanted to get some experience working with it. I decided to take it on and learn as I went along, and very quickly found that my set-up differed from examples I’d found online as well as other members of my cohort who were also using Redux. That is when I realized my set-up implemented the Redux Toolkit library, which simplifies a lot of the redux process. Below is how I set up some basic Redux for my final project.

To start, I installed both the React-Redux and the Redux Toolkit libraries:

npm install @reduxjs/toolkit react-redux

Next, I created a user slice using the createSlice hook provided by Redux Toolkit. The createSlice hook is a “function that accepts an initial state, an object full of reducer functions, and a “slice name”, and automatically generates action creators and action types that correspond to the reducers and state.” The name value is a string that will be used in action types. The initialState value is an object with the initial state for the reducer and the key names will be used for actions. The reducers value is an object of case reducers where the keys names are action types.

src/redux/userSlice.js

Then I set up my store file using the configureStore hook, that is provided by Redux Toolkit, and imported the slice reducers. The configureStore is a “friendly abstraction over the standard Redux createStore function that adds good defaults to the store setup for a better development experience.”

src/redux/store.js

Next I connected my store to my application through my index.js file using the Provider hook and passing in the store as a prop to Provider:

src/index.js

Once set up, I was able to access the state values by importing the useSelector hook in any component:

To dispatch an action from any component, I only needed to import the useDispatch hook as well as any action creators from my slice files. I then needed to call the useDispatch hook by setting it to a variable, dispatch. I was then able call dispatch with an action creator anywhere within the component. In this case, I dispatched the addTransaction action creator with an object as the payload.

This was my first time working with Redux and while it’s a very simple implementation it gave me a glimpse at its power and usefulness. I’ve only dipped my toe into Redux, but what I have learned and been able to accomplish has only encouraged me to learn more. The set up can be tedious, but is simplified using the Redux Toolkit library. Once set up, it felt like it actually saved me time by not having to constantly pass data between components. Redux may not always be the best choice, but is a useful option for managing highly used state values.

Resources:

Redux Toolkit | Redux Toolkit