Read the saved data initially in react native and redux - react-native

Question

I am learning redux. I am testing it in todo app. Everything works fine but how can I display the saved todos in the beginning. I've used AsyncStorage to store the todos list in reducer and tried to read them in mapstatetoProps function but in vain. How can I do that. Thankyou
store
import { createStore } from "redux";
import rootReducer from "../reducers";
export default (store = createStore(rootReducer));
reducer
let nextId = 0;
let newState = [];
saveTodos = newToDos => {
const saveTodos = AsyncStorage.setItem(
"savedToDoList",
JSON.stringify(newToDos)
);
};
const todos = (state = [], action) => {
switch (action.type) {
case "ADD_TODO":
newState = [
...state,
{
id: nextId++,
text: action.todo,
completed: false
}
];
this.saveTodos(newState);
return newState;
case "TOGGLE_TODO":
return state.map(
todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
);
default:
return state;
}
};
visibleTodo.js
const mapStateToProps = state => {
return {
todoss: state.todos
};
};
const mapDispatchToProps = dispatch => ({
toggleTodo: id => dispatch({ type: "TOGGLE_TODO", id })
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ToDoList);
ToDoList.js
const ToDoList = ({ todoss, toggleTodo }) => (
<View style={{ padding: 20 }}>
{todoss.map(todo => (
<TouchableOpacity key={todo.id} onPress={() => toggleTodo(todo.id)}>
<Text
style={{
fontSize: 16,
color: "gray",
textDecorationLine: todo.completed ? "line-through" : "none"
}}
>
{todo.id + 1 + ". " + todo.text}
</Text>
</TouchableOpacity>
))}
</View>
);

Answer 1

I think that what you are looking for is redux-persist, so every time you create your store it will try to persist with async storage getting the previous data and when you add something to your store, it'll be persisted to async storage.
Here is a very good tutorial for that https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975
Note: if you don't have nothing in your async storage yet, you'll need to add a todo first