How use data from Redux state? - reactjs

Question

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

Answer 1

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