To use Redux in a React app with Redux Toolkit, you can follow these steps:
npm install @reduxjs/toolkit2. Set up your Redux store: Create a file called store.js (or any other name you prefer) in your project’s directory. In this file, import the necessary Redux Toolkit functions and create your Redux store.…
The new Hooks API solves a lot of problems. But it does not solve the problem why we need Redux and Higher Order Components. This article explains why.
Consider a React app with independent container components: ‘Module A’, ‘Module B’, ‘Module C’ and so on. When I say independent, what I mean is Module A does not share state with Module B or Module C.…
Redux is a global state manager. React Redux provides bindings for React apps. In this article, I will show how we can manage global state using reducer functions just like how Redux does.
useReducer hook has a few limitations. We cannot use the hook with the same reducer more than once. Because of the limitation, a React app using useReducer hook passes down props from the container components down to leaf level components.…
Global state lifts state and puts it outside React components. This helps in sharing state between components. Most React apps use Redux or Mobx for global state management. In this article, we will learn how to use the new React Hooks API and useReducer function for global state management.
This article is yet another tutorial or lab. So, I encourage readers to try out this tutorial after reading it.…
Redux is a package that manages state in React applications. I am assuming you know how to add Redux to a React app. If you don’t know, please check my blog post on how to add Redux to a React app.
Redux helps in streamlining data flow in the app. From event handlers, we create an action using action creators and dispatch the action with data to the store.…
For most part, React is declarative. But there are times when we have to use imperative methods. This is quite common in React native. In React native, after an API call, we may use imperative methods for notifications or navigation. So, how do we handle this? Below is a code snippet of an action using redux-thunk.
export function callApi() {
return dispatch => {
dispatch({ type: ActionTypes.CallApiPending… React navigation is the suggested community package for navigation in React native apps. It has three navigators: Stack navigator, Tab navigator and Drawer navigator. There are quite a few configuration options. Overall, I find it quite useful for my needs. But, there is one area that requires a bit of work. It is about sharing data between the navigation buttons and the main app view.…
Redux is a state management library for JavaScript apps. The core Redux library implements the flux pattern. In this post, I won’t be writing about the Redux library but the react-redux library which has the plumbing code to integrate Redux into React apps. When we use react-redux library, the plumbing code that makes it work is hidden from us. Without knowing how it works, we may not know how to optimize our apps.…
For many people, adding Redux to a React application may appear as a daunting task. In my opinion, it is not so difficult. With exactly three changes, we can add Redux to an existing react application. For our example, I am going to create the React application using CRA or create-react-app. CRA is a nice utility from Facebook to quickly create React apps.…
React is unopinionated and may be that is a problem. React component has a state. The state within the component get a bit messy for any medium-sized application. State management libraries like Flux, Redux or Mobx are available to manage state. The Flux pattern enables uni-directional data flow in a React application. The article explains the various patterns available to manage state and control data flow.…