Now that we have all the code of our tiny todo app, we are going to create the "server" to which the application will request the todos.
Install json-server from NPM:
npm i --save-dev json-server
Add an script to start the server
Add the next script to your
package.json to run the server:
"json-server": "json-server --watch db.json --port=3100"
Add the database
db.json file at the root of the project, containing the initial database for the server, as well as the route that it has to use to serve the todos:
"text": "Finish the basic tutorial",
Start the server
npm run json-server
Start the app
Now, while the server is running, start the app in another shell:
You can now use the Redux devTools to inspect how the "data" states change while you add or modify todos. Open also the Network inspector, you'll notice how every time you modify a todo, all todos are requested again, so the todo list is always maintained up-to-date.
Notice also how all modifications or new todos are saved in the
The complete source code of the app built during this guide is in our repository of examples.
Now you know the basics, you should take some time to read through the recipes to get a better understanding of what Data Provider can really do for you in a real world project.