So, let’s try to explore the core redux concepts by creating a simple counter application. Redux Store First thing we need is a redux store. Let’s create one. const store = redux.createdStore(); Reducer This store is responsible to hold our data. The data it holds is determined by the reducer. The reducer has one job, i.e. to spit out a new snapshot of the store when an action occurs. So, the next thing we want to add is a reducer function....
I started learning Redux this week and while doing so, I realized that before I learn the core Redux library and the functions it has to offer, I’d be better off learning about the Redux as a design pattern for global state management. With a thorough understanding of the Redux design pattern, I can utilize the best tools available to implement the pattern (i.e. the Redux toolkit and Redux library) to their full potential....
When working with JavaScript, we deal a lot with conditionals, here is a quick and easy way to write better / cleaner multiple or conditionals. Let’s take a look at the example below: // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } Initially, the example above appears to be a good one. However, what if we received more red fruits, such as cherries and cranberries?...
Formik is a form management library that provides components and hooks to ease the process of creating React forms. Formik takes care of form states, validation, and error handlers for you which makes it easy to collect and store user data. Following are the 2 of the best resources I have found online to learn formik.js: How to Use Formik to Create Forms in React Formik JS playlist by CodeEvolution
In addition to the useState Hook, there is the useReducer Hook in React. It allows for the creation of custom state logic. useReducer may be useful if you have to track multiple pieces of state involving complex logic. The useReducer Hook accepts two arguments. Syntax: useReducer(<reducer>, <initialState>) The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object. The useReducer Hook returns the current state and a dispatch method....