Unable to show todo List in Initial render in react - reactjs

Question

I am trying to build the todoList using react, redux, redux-form and firestore database, I am able to insert the todo inside the database using actions or action creator also, I am able to fetch the data store in database but I am unable to show data on the website when the user first visits the website, also when user add todo and submit the form the first todo item shows to me blank!. Can someone help me to tell what's wrong with my code?
App.js
import React from 'react'
import { Container} from 'react-bootstrap'
import { connect } from 'react-redux'
import InputForm from './InputForm'
import Todo from './Todo'
import {listTodo} from '../actions'
class App extends React.Component {
constructor(props){
super(props);
this.renderList = this.renderList.bind(this);
}
componentDidMount(){
this.props.listTodo();
console.log(this.props.list);
}
renderList(){
return this.props.list.map((todo,id) => {
return (
<Todo todo={todo} key={id}/>
)
})
}
render() {
console.log("rendered");
if(!this.props.list){
return <div>Loading...</div>
}
return (
<Container fluid>
<h1 className="text-center" style={{marginTop: "5vh"}}>Todo App</h1>
<InputForm />
{this.renderList()}
</Container>
)
}
}
const mapStateToProps = (state) => {
console.log(state.todoList);
return {
list: state.todoList
}
}
export default connect(mapStateToProps, {listTodo})(App)
Todo.js
import React from 'react'
import { Card } from 'react-bootstrap'
class Todo extends React.Component {
render(){
console.log(this.props.todo);
return (
<Card className="text-center">
<Card.Body>
<Card.Text>{this.props.todo.todo}</Card.Text>
</Card.Body>
<Card.Footer className="text-muted">DeadLine by {this.props.todo.date}</Card.Footer>
</Card>
)
}
}
export default Todo
action(index.js)
import database from '../firebase/firebase'
export const addTodo = (inputValue) => {
database.collection('Todo').add({
todo: inputValue.todo_input,
date: inputValue.todo_date
});
return {
type: "ADD_TODO",
payload: inputValue
};
}
export const listTodo = () => {
const data = [];
database.collection('Todo').onSnapshot(snapshot => snapshot.docs.map(doc => data.push(doc.data())));
return {
type: 'LIST_TODO',
payload: data
}
}
export const deleteTodo = id => {
//delete todo
return {type: 'DELETE_TODO'}
}
TodoReducer.js
export default (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'LIST_TODO':
return action.payload;
case 'DELETE_TODO':
return state.filter(item => item.id !== action.payload);
default:
return state;
}
}
reducers.js
import { combineReducers } from "redux";
import {reducer as formReducer} from 'redux-form'
import todoReducer from './TodoReducer'
export default combineReducers({
form: formReducer,
todoList: todoReducer
});

Answer 1

In your listTodo action creator, you create an object data and return that as part of your LIST_TODO action. This data object is then persisted into your store and then manipulated by your onSnapshot callback to add items to that data after the fact.
Those changes cannot be detected by React-Redux and so your component does not update by itself with content.
export const listTodo = () => {
const data = [];
// do never do something like this!
database.collection('Todo').onSnapshot(snapshot => snapshot.docs.map(doc => data.push(doc.data())));
return {
type: 'LIST_TODO',
payload: data
}
}
This breaks the second Redux Principle "The only way to change the state is to emit an action, an object describing what happened".
To do something like this, you would need to use a middleware, most commonly the redux-thunk middleware.
That is already included in the official Redux Toolkit, which I would generally recommend you to check out.
Since showing you how to do this correctly would turn into a 1:1 copy of the official tutorials, check those out instead:
for old-style "Vanilla Redux": Redux Fundamentals, Part 6: Async Logic and Data Fetching
for "Modern Redux" with Redux Toolkit: Redux Essentials, Part 5: Async Logic and Data Fetching