Speedometer 3.0: TodoMVC: React-Redux

Description

This application uses React in combination with Redux to implement a todo application.

• React is a JavaScript library for creating user interfaces.
• Redux centralizes your application's state.
• React-Redux is designed to work with React's component model.

Implementation details

This implementation uses Redux to manage state and data flow of the application. The Redux pattern is similar to a mvc patter, with the main difference that Redux is unidirectional. Redux uses actions to dispatch a change, which is captured by reducers that update a central store. Once the state in the store updates, the view receives the new state and can reflect those changes to the user.

Redux:
Model: Redux store
View: React ui components
controller: React connected components + Redux reducers

MVC:
Model: maintains the data and behavior of an application
View: displays the model in the ui
Controller: serves as an interface between view & model components

The storage solution uses an in-memory data object that implements a simple array to hold the todos.

Built steps

To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a dist folder.

Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)

Local preview

terminal:
1. npm install
2. npm run dev
browser:
1. http://localhost:7001/