How to get the data from Redux store using class components in React

Question

I am working on a React project, In my project I am trying to implement redux to store data and

Everything. In my project One form is there when the user fills the form and clicks the submit

Button, then the Information is stored in redux store. Now I am trying to get the stored data

In another component. But I am unable to get the data from the store it is showing empty array.

This is Getusers.js

import React, { Component } from 'react';
import './Getusers.css';
import { Table } from 'reactstrap';
import store from '../../../Components/Redux/Store/store';


class Getusers extends Component {
    constructor(props) {
        super(props)

        this.state = {
            list: []
        }

        store.subscribe(() => {
            this.setState({
                list: store.getState().userList
            })
        })

        console.warn(this.state.list)
    }



    render() {
        return (
            <Table striped>
                <thead>
                    <tr>
                        <th>So No</th>
                        <th>Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </Table>
        )
    }
}

export default Getusers

Answer 1

import React, { Component } from 'react';
import './Getusers.css';
import { Table } from 'reactstrap';
import store from '../../../Components/Redux/Store/store';

class Getusers extends Component {
    constructor(props) {
        super(props)
        

        this.state = {
            list: []
        }

        store.subscribe(() => {
            this.setState({
                list: store.getState().userList
            })
        })

        console.warn(this.state.list)
    }



    render() {
        const userData = this.props.propName
        return (
            <Table striped>
                <thead>
                    <tr>
                        <th>So No</th>
                        <th>Name</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </Table>
        )
    }
}


let mapStateToProps = (state) => {
  return {
    propName: state.user,
  };
};

let mapDispatchToProps = (dispatch) => {
  return {
    dispatchName: (data) => dispatch(reducer(data)),
  };
};

const GetusersComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(Getusers);


export default GetusersComponent;

Answer 2

    import React, { Component } from 'react';
    import './Getusers.css';
    import { Table } from 'reactstrap';
    import store from '../../../Components/Redux/Store/store';
    import {connect} from 'react-redux';

    class Getusers extends Component {
        constructor(props) {
            super(props)

            this.state = {
                list: []
            }

            store.subscribe(() => {
                this.setState({
                    list: this.props.list
                })
            })

            console.warn(this.state.list)
        }



        render() {
            return (
                <Table striped>
                    <thead>
                        <tr>
                            <th>So No</th>
                            <th>Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </Table>
            )
        }
    }

    const mapStateToProps = state => {
//replace Reducer name with state.'Your Reducer name' and .property
      return {
        list: state.getState.userList,
      };
    };
    const mapDispatchToProps = dispatch => {
      return {
        CallinComponent: () => {
          dispatch(MiddlewareName.ActionName());
        },
    };

    export default connect(mapStateToProps, mapDispatchToProps)(Getusers);