Persisting data using local storage with React+Redux
Let’s continue developing an Interactive ToDo List. Refer to the previous posts you notice that we are almost done with the basic functionality of the application. And today I would like to start the topic about persisting the data and restoring it after refreshing the page or starting a new session on the local machine with React+Redux.
Changing into the my-daily-todos
project, then to src
folder where you find index.js
. Here we store all the app’s state in the store
variable. Now we are also going to add a new variable that will keep the initial state and a new constant persistedState
that allows us to get the persisted state from store passing to method getItem
of localStorage
=> localStorage.getItem('reduxState')
:
So, the initState
variable has the default value – empty {}
. If there is no persisted state in the local storage, it is going to stay empty.
On the other hand, when there is some persisted state in the local storage, we are going to load that state and set initState
to value, that we have just loaded.
// my-daily-todos/src/index.js
...
import { App } from './App.js';
import { tasksReducer } from './Tasks/reducers.js';
import './index.css';
let initState = {}
const persistedState = localStorage.getItem('reduxState')
// if persistedState is not empty then assign parsed persistedState to initState
if (persistedState) {
initState = JSON.parse(persistedState)
}
...
Notice that we are passing the second parameter initState
to createStore
method in store
. The second parameter of createStore
function is for setting the initial state of the store when the application is launched:
// my-daily-todos/src/index.js
...
let store = createStore(
combineReducers({
tasks: tasksReducer,
}),
initState
);
...
Onward!
We are going to use subscribe
method of our store
. That method will trigger the function we provide every time there is any change to the application state.
We are going to supply a function that will get the whole state from the store using getState()
method of store
. Then it is going to convert that state object to a string using JSON.stringify()
. Finally, it is going to persist that state using localStorage.setItem()
:
// my-daily-todos/src/index.js
...
store.subscribe(() => {
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})
...
That’s it.
To check how it works run the local server on your computer in the project folder with the npm start
command. Afterwards, try to add and categorize some tasks by tags, then close the tab with the application or refresh the page to see that the data is stored successfully.
Did you find another way how to implement it in our project? Let me know by email or write me a direct message on Instagram. That is how the index.js
should look like now:
// my-daily-todos/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { App } from './App.js';
import { tasksReducer } from './Tasks/reducers.js';
import './index.css';
let initState = {}
const persistedState = localStorage.getItem('reduxState')
if (persistedState) {
initState = JSON.parse(persistedState)
}
let store = createStore(
combineReducers({
tasks: tasksReducer,
}),
initState
);
store.subscribe(() => {
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
If you enjoyed this post, I would be very grateful if you would help me spread the word by emailing it to a friend or sharing it on social networks. Thank you!