Redux Paradox

Coming to the end of my part-time software engineering course with Flatiron School I was met with a challenge of incorporating Redux in my final project using React and JavaScript on the frontend and Ruby on Rails for the backend.

Redux is a state management tool that is compatible with JavaScript applications. It is supposed to make it easier for when you need the same state to be shared between multiple components and reflected in different parts of the application. It also comes in handy when the application states change frequently and different components can initiate changes simultaneously.

Seeing that my application is far from having a medium-to-large codebase with several developers working on it, it was an added step that I needed to make, that kind of defeated the whole purpose of Redux being a tool that improves the developer's experience. It was good to know how it works with React though.

In my final project, I am aiming to build an ecommerce application that is promoting Malaysian made handicrafts and products to help support micro businesses in rural areas in the country. I want it to help build the overall nation's economy and help increase job opportunities for locals. I had used Redux specifically for five cases:

1. FETCH_CATEGORIES
2. ADD_CATEGORY
3. ADD_ITEM
4. DELETE_ITEM
5. EDIT_CATEGORY

First install Redux:

Redux + Plain JS template

npx create-react-app my-app --template redux

Redux + TypeScript template

npx create-react-app my-app --template redux-typescript

OR install it as a package on NPM or in a Node application:

NPM

npm install redux react-redux

Yarn

yarn add redux

In your index.js file is where all the "action" happens. This is where you import {createStore} from 'redux'. Then, set up your Redux store by declaring store assigned to createStore(). To enable React to associate with the Redux store is by using the React-Redux package by importing {Provider}. It will wrap the <App/> and pass in the store as a property.

Next create a reducers and actions folder, where you will create say a rootReducer file and an action creator file. In the rootReducer you would need to declare it passing in a state and an action
as arguments, returning the state. Then you would need to define an initial state. Lastly, at the bottom of the file, write export default rootReducer. Not forgetting to import the rootReducer in the index.js. You can then pass in the rootReducer in the createStore function. Following this, you're able to {connect} to components.

Other things I grew to like while building this project was client side routing and presentational components. The longer I learn how to code the more I’m veering towards front-end development. Perhaps I owe it to all those years in the media as an editorial assistant and writer, where I was fixated on the perfect magazine cover, photo shoots spread and layouts for our articles. Over a decade and some change, I’ve gone full circle and back to obsessing over presentation. Queue, the “presentation component”. Being mostly stateless, they’re simple and beautiful in doing what they do best - receiving props from their parent components and rendering! There’s just that satisfaction of having it all “work” for a change. With that said, let's hope we're able to leverage on using React and Redux in our near futures.

Resources and citation on REDUX:

• item 1 Setting Up The Middleware
• item 2 Complete React Tutorial (& Redux) #39 - Setting up Redux in React by The Net Ninja
• item 3 Learning the basics - ReactJS and Redux
• item 4 Using Redux in React apps: When and why you need Redux
• item 5 Why Use React Redux?

Comments

[Mark Erikson]

Hi, I'm a Redux maintainer. Unfortunately, it sounds like the Flatiron curriculum may be teaching a lot of very outdated Redux usage practices.

Today we teach "modern Redux", using our official Redux Toolkit package for writing your Redux logic, and the React-Redux hooks API for using Redux in your components. Both of those will greatly simplify your Redux code, and they're a lot easier to learn and use than older-style patterns that require a lot of hand-written code like action type constants.

Please see our official Redux docs tutorials for details:

redux.js.org/tutorials/index

[Yani A.]

Hey Mark, thank you so much for sharing! I'll definitely be checking this out after I graduate (hopefully by next week!). We were told by our instructor that the curriculum was in fact a little behind and that we should stick to what we were taught since it would be too complex to get into the more updated version. I'm psyched to check it out again at my own time and really soak it in!