when i add course i can see that in AllCourses list and in redux but when i refresh the the Allcourse list is empty and redux is empty too i think there is some thing wrong in courses.ja/actions. what am I doing wrong?

**courses.js/actions**

i think data in not fetching in reducer to store thre is sme thing wrong with the code or something else

```
import {coursesRef} from '../services/fire';

const FETCH_COURSES = 'FETCH_COURSES';

export const addCourse = newCourse => async dispatch => {
  coursesRef.push().set(newCourse);

};
export const removeCourse = removeCourse => async dispatch => {
  coursesRef.child(removeCourse).remove();
};

export const fetchCourse = () => async dispatch => {
  coursesRef.on("value", snapshot => {
    dispatch({
      type: FETCH_COURSES,
      payload: snapshot.val()
    });
  });
};

```

AddCourse.js

```
import React, { useEffect, useState } from 'react';
import { Button, Form, FormGroup, Label, Input, FormText, Container } from 'reactstrap';
import database from '../services/fire';
import { useSelector, useDispatch } from 'react-redux';
import uuid from 'react-uuid';
import '../App.css';

const AddCourse = () => {

        const [courseId, setCourseId] = useState('');
        const [courseTitle, setCourseTitle] = useState('');
        const [courseDesc, setCourseDesc] = useState('');
        const dispatch = useDispatch();
        const user = useSelector(state => state.auth.user.uid);

        useEffect(() => {
            document.title = "Add Courses"
        }, [])

        const addCourse = () => {
            const payload = { id: uuid(), courseId:courseId, courseTitle: courseTitle, courseDesc: courseDesc }
            const dbcoursesWrapper = database.ref().child(user).child('courses');
            // const dbcoursesWrapper = database.ref(`users/${user}/courses`).push(courseId, courseTitle, setCourseDesc);
            return dbcoursesWrapper.child(payload.id).update(payload).then(() => {
                setCourseId('');
                setCourseTitle('');
                setCourseDesc('');
                dispatch({ type: "ADD_COURSES", payload });
            })
        }

        return (
            <div>
                <h1 className="text-center my-3">Fill Course Detail</h1>
                <Form onSubmit={(e) => {
                    e.preventDefault(e.target.value);
                    addCourse();
                }}>
                    <FormGroup>
                        <label for="UserId">Course Id</label>
                        <Input
                            type="text"
                            value={courseId}
                            onChange={(e) => setCourseId(e.target.value)}
                            placeholder="Enter your Id"
                            name="userId"
                            id="UserId"
                        />
                    </FormGroup>

                    <FormGroup>
                        <label for="title">Course Title</label>
                        <Input
                            type="text"
                            value={courseTitle}
                            onChange={(e)=> setCourseTitle(e.target.value)}
                            placeholder="Enter Course Title"
                            name="title"
                            id="title"
                        />
                    </FormGroup>

                    <label for="description">Course Description</label>
                    <Input
                        value={courseDesc}
                        onChange={(e) => setCourseDesc(e.target.value)}
                        type="textarea"
                        placeholder="Enter Course Description"
                        name="description"
                        id="description"
                        style={{ height: 150 }}
                    />
                    <Container className="text-center">
                        <Button color="success" type='submit'>Add Course</Button>
                        <Button color="warning ml-3">clear</Button>
                    </Container>
                </Form>
            </div>
        );
    };
    export default AddCourse;

```

AllCourses.js code

```
    onst AllCourses = () => {
    const dispatch = useDispatch();
    const courses = useSelector(state => state.courses);
    const coursesArray = Object.values(courses);

    useEffect(()=>{
        console.log(coursesArray);
    },[])

    return (
        <div>
            <h1>All-Courses</h1>
            <p>List Of Couses are as follows</p>

            {coursesArray.length}

            { coursesArray.length > 0 ? coursesArray.map((item) =>
                <Course course={item} />) : "No Courses"
            }
        </div>
    )
}
export default AllCourses;

```