How use data from Redux state?
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
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);
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?