Running the example

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

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:

{
  "scripts": {
    "json-server": "json-server --watch db.json --port=3100"
  }
}

Add the database

Create a 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:

db.json

{
  "todos": [
    {
      "id": 1,
      "text": "Finish the basic tutorial",
      "completed": false
    }
  ]
}

Start the server

npm run json-server

Start the app

Now, while the server is running, start the app in another shell:

npm start

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 db.json file.

The complete source code of the app built during this guide is in our repository of examples.

Next steps

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.