In this tutorial, we will show how to add Nun-db to an already existent react/redux app. This project is a copy and paste of https://github.com/reduxjs/redux/tree/master/examples/todomvc + adding Nun-db as a database that makes it real-time and durable.

We need to make little archive that goal. (And I also believe this is true for any other Redux like projects)
Checkout it in action

Next I will list the changes we have made.

1. Clone redux samples

git clone git@github.com:reduxjs/redux.git

2. Go to the examples folder

cd redux/examples/todomvc

3. Install all modules

npm i

4. Start the dev app

npm start

At this point, the app with be running without any persistence. If you reload the app, add data come back to the default state. Now the fun starts.

5. Run nun-db server in docker

In a different terminal

docker run --env NUN_USER=user-name --env NUN_PWD=user-pwd -it --rm -p 3013:3013 -p 3012:3012 -p 3014:3014 --name nun-test mateusfreira/nun-db

6. Create the nun database

Now back to the js project.

7. Installed Nun-db in the project

npm install nun-db

8. Added Nun-db middleware

Code here

Use your favorite text editor, vim src/nun.js

Add the next code to the file

9 Added Nun-db middleware to the store in the index.js

Code here

Reload the page and check the network console tab to make sure the database connected as expected.

10. Add event to update all the state in the first load

Code here

Done your app is already working with Nun-db. Now to see the magic happening, open the same page in another computer or browser to see how changing one place will reflect immediately in the other. In summary, all you need is the following changes (git diff).

And adding the nun.js to the src folder as shown in this post… Happy hacking!!!

This is all I did, and now the app is real-time, durable, and with minor changes to the code. I hope it helps you to do the same on your app. If not, don’t leave us an issue. We will be happy to make it work on your app.

Complete final code here Checkout it in action

Meet nun-db on github