Как получить данные из хранилища Redux с помощью компонентов класса в React - PullRequest
Новая
       9

Как получить данные из хранилища Redux с помощью компонентов класса в React

0 голосов
/ 06 мая 2020

Я работаю над проектом React. В своем проекте я пытаюсь реализовать redux для хранения данных и

всего. В моем проекте одна форма появляется, когда пользователь заполняет форму и нажимает кнопку отправки

, а затем информация сохраняется в хранилище redux. Теперь пытаюсь получить сохраненные данные

в другом компоненте. Но я не могу получить данные из магазина, в котором отображается пустой массив.

Это 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

1 Ответ

1 голос
/ 06 мая 2020 
    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);
...