React/Redux basic CRUD with persistent state, demo->

Overview

React/Redux basic CRUD example

This little app was made to test a basic CRUD for a webpapp. This was done thinking on a mobile or chrome application so this is not using routes.

A separation between the state and the application data is in place to test a more realistic situation where you do async calls to a remote API, something missing on many redux/react examples.

This is being developed while I'm learning about react/redux so the code shared here may contain newbie errors and is not following any particular standard, but it contains a bunch of comments that may help some one that is struggling to understand how react/redux works.

Demo

Local Storage This uses local storage for two tasks:

  • store the state (redux-localstorage) this allows the webapp to be reloaded without losing the current state. (so it can be a hosted webapp that when added to IOS home screen does not lose the state each time the user goes away and comes back stackoverflow)
  • store the CRUD data (store.js) when actions are dispatched, async calls are executed against a local api that takes care of the data, a delay time is in place so the "fetching" state can be shown.

Web app Can be added to IOS/Andriod home screen and each time is loaded the state remains the same (because the persistent state plugin).

No routes Routes are amazing and are a requirement in many cases but this is a trial to check an alternative way when there is no need to provide bookmarks to sections or server rendering.

To do Learn more and improve this example.

Use

npm install
npm start

Open http://localhost:8080/

Screens

List

Form

Fetch simulation

License MIT

You might also like...
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM
Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoose ODM

🤘 MERN Stack CRUD Application Free and open-source MERN Stack CRUD Application built with React v17+, RRDv6+, Node.js, Express.js MongoDB and Mongoos

CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List 💻 Demonstration of the application | Features | Technologies used | Application installation 💻 Demonstration of the application

A complete CRUD of a camera store made with ReactJS.
A complete CRUD of a camera store made with ReactJS.

React CRUD API with Typescript Table of Content About The Project Description Built With Installation Usage Demo Contact About The Project Description

demo with react,ant-design,redux,react-router,webpack,babel
demo with react,ant-design,redux,react-router,webpack,babel

star-initReact-example A demo with star-initReact-example ##效果截图 首页 列表页 弹框 表格组件 echart 使用技术和实现功能 webpack + React +React-router + React-redux +ES6 + an

Basic Lua & React (TypeScript) boilerplate for FiveM
Basic Lua & React (TypeScript) boilerplate for FiveM

FiveM React and Lua Boilerplate A simple and extendable React (TypeScript) boilerplate designed around the Lua ScRT This repository is a basic boilerp

🎉A basic react admin template with vite2 & ant4 UI & axios & svg-icon& permission control & lint
This project is a React Starter Kit with basic tools and examples of their use.

Welcome React Starter Kit! This project is a React Starter Kit with basic tools and examples of their use. Tools used React: V17 react-hook-form: V7 r

Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

Murodjon Tursunpulatov 3 Jul 5, 2021
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 208 Jan 8, 2023
An example real-world Redux CRUD application with no boilerplate

Zero Boilerplate Redux A common criticism of Redux is that it requires writing a lot of boilerplate. This is an application that is meant to show a so

James 18 Nov 23, 2022
This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Sachintha 2 Oct 25, 2021
Ini adalah kumpulan source code belajar website React JS dari Channel Youtube Prawito Hudoro, Materi CRUD React MERN

MERN Basic Indonesia Screenshot Aplikasi Dokumentasi API https://documenter.getpostman.com/view/10749611/UVXbvKqe Pengertian MERN Mongo DB Adalah suat

Rifki Ramadhan 3 Jun 6, 2022
React CRUD with Firebase

React-CRUD-with-Firebase React project demonstrating CRUD Operations with Firebase. How it works ? ?? Video tutorial on this same topic Url : https://

CodAffection 15 Aug 5, 2022
CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 2021.

react-crud-recipe-app CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 20

MUHAMMAD WAFIYUDDIN BIN ROHANIZAM 4 Aug 30, 2022
A Simple CRUD Example With React.js

CRUD IN REACT yarn yarn start My Contact Data Marlon Falcón Hernández | España | Valencia * ERP, CRM y Software: https://www.marlonfalcon.com » Email

null 9 Apr 18, 2022
A simple app performing CRUD operations using React, Spring Boot, Bootstrap, MySQL and Apache server

Employee Details Management Application A simple app performing CRUD operations using React, Spring Boot, Bootstrap, MySQL and Apache server Initial s

Arjun Aloshious 4 Aug 30, 2022