如何使用 React 中的 class 组件从 Redux 商店获取数据

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';
    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);

Answer 2

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;