1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
# Speedometer 3.0: TodoMVC: React-Redux
## Description
This application uses React in combination with Redux to implement a todo application.
- [React](https://reactjs.org/) is a JavaScript library for creating user interfaces.
- [Redux](https://redux.js.org/) centralizes your application's state.
- [React-Redux](https://react-redux.js.org/) 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/
```
|
