How use data from Redux state?

- 1 answer

Ad

I am new in Redux and React.

I changed data with action and they are changed ! I get to React component state. It is as follows:

enter image description here

How do I extract data from it and use it to render the component? New COMPONENT

import React from 'react';
import {connect} from 'react-redux';
import {filterChangeTab} from '../../actions/filters';

const FilterPage = React.createClass({
    componentDidMount(){
        const { dispatch, filterState } = this.props;
    },

    handleSelect: function (index, last) {
        return this.props.dispatch(filterChangeTab(type[index]))
    },

    render() {
        const {dispatch, filterState } = this.props;
        return (
            <div className="profile-page">
                    <Tabs onSelect={this.handleSelect} selectedIndex={1}></Tabs>
            </div>
        );
    }
});

function select(state, props) {
    let {
        filterState
        } = state;
    return {
        entries: filterState.entries
    }
}

export default connect(select)(FilterPage);
Ad

Answer

Ad

Official documentation

The official documentation of redux is great and should guide you through your question. I would highly recommend to read through, as the following is just an excerpt.

Propagate data as props

I assume, that your store is successfully connected to your root component. Otherwise you should check the mentioned documentation again. Also verify that you installed the react-redux bindings. With this bindings, you could easily use the connect- API to connect your component to the redux store.

In your component you return an object with the entry entries:

return {
    entries: filterState.entries
}

So you have to call this entry correctly in your render function:

import React from 'react';
import {connect} from 'react-redux';
import {filterChangeTab} from '../../actions/filters';

import Select from 'react-select';

const FilterPage = React.createClass({

    componentDidMount(){
        const { dispatch, filterState } = this.props;
    },

    handleSelect: function (index, last) {
        let type = ["all", "categories", "people", "organization", "strength", "curators", "skills"];
        return this.props.dispatch(filterChangeTab(type[index]))
    },

    render() {

        //filterState.getState(); not work

        // Use the correct names!
        const {dispatch, entries} = this.props;
        // Do whatever you want with this value
        console.log(entries)

        return (
            <div className="profile-page">
                            Date range:

                            <Select
                                name="select"
                                value="All time"
                                clearable={false}
                                searchable={false}
                                options={options}
                                onChange={this.logChange}
                            />
                    <Tabs onSelect={this.handleSelect} selectedIndex={1}>
                    </Tabs>
            </div>
        );
    }
});

function select(state, props) {
    const {filterState} = state;
    const entries = filterState._root === undefined ? {} : filterState._root.entries;
    return {
        entries
    }
}

export default connect(select)(FilterPage);
Ad
source: stackoverflow.com
Ad