How to make redux TodoMVC example a real-time multiuser app with nun-db in 10 steps
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 email@example.com:reduxjs/redux.git
2. Go to the examples folder
3. Install all modules
4. Start the dev app
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
Use your favorite text editor,
Add the next code to the file
9 Added Nun-db middleware to the store in the index.js
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
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…
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.
- Real-time Medical Image Collaboration POC Made Easy with OHIF and Nun-db
- How to create users with different permission levels in Nun-db
- Match vs Hashmap! Which one is faster in rust?
- Towards a More Secure Nun-db: Our Latest Security Enhancements
- Building a Trello-like React/Redux App with Nun-DB with offline and conflict resolution features
- Introduction to managing conflicts in Nun-DB
- Keepin up with Nun-db 2023
- The new storage engine of Nun-db
- Stop procrastinating and just fix your flaky tests, it may be catching nasty bugs
- An approach to hunt and fix non-reproducible bugs - Case study - Fixing a race conditions in Nun-db replication algorithm in rust
- Nun-db the debug command
- Keeping up with Nun-db 2021
- Writing a prometheus exporter in rust from idea to grafana chart
- Integration tests in rust a multi-process test example
- Leader election in rust the journey towards implementing nun-db leader election
- How to make redux TodoMVC example a real-time multiuser app with nun-db in 10 steps
- A fast-to-sync/search and space-optimized replication algorithm written in rust, The Nun-db data replication model
- NunDb How to backup one or all databases
- How to create your simple version of google analytics real-time using Nun-db
- Migrating a chat bot feature from Firebase to Nun-db
- Keepin' up with Nun-DB
- Going live with Nun-DB