Confirm delete box using React Redux

Confirm delete box using React Redux

I found myself writing the same code over and over, the flow was always the same, a user presses the delete button, a state changes from false to true, an alert appears, the item is stored in another state, and when the user clicks on the ok button we callback to the relevant delete function with the item ID.

I recently worked on a crm application that contains a lot of lists of items with the option to delete each item in the list.

I wanted to pop up an alert for the user to ask if he is sure he wants to delete.

At first,the app was small and there was no problem creating the message for certain pages in the app, but slowly the app got bigger and bigger and more lists and more items were added and especially more alerts before deletion.

I found myself writing the same code over and over, the flow was always the same, a user presses the delete button, a state changes from false to true, an alert appears, the item is stored in another state, and when the user clicks on the ok button we callback to the relevant delete function with the item ID.

Not fun…

I want to show you how you can achieve this flow easily and efficiently without writing unnecessary code using Redux.

For the demonstration, I wrote a simple app that fetchs imaginary information from the server. Like, ummm …. users.

Image for post

redux javascript react programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

React With Redux + Redux Thunk

Getting started with using Redux and Redux Thunk in your React app As your react application gets larger, it gets harder and harder to keep track and maintain your states. This is where Redux can come in to help; it is a state management library that provides you with a central state (called the store), eliminating the need to pass props between components.

React Native Redux | How To Use Redux In React Native

React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.

Accessing Redux from Components In React & React Native

How to set up a basic version of Redux in your React or React Native application. To make things clearer, I based my setup on my event application, where users create events that other users attend. We generated the action creators, reducers, and Redux store, and wrapped the application in a provider.