如何使用Redux状态的数据？

Question

我是Redux和React的新手。

我通过操作更改了数据并将其更改！ 我进入React组件状态。它如下：

如何从中提取数据并使用它来渲染组件？ 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很棒，应该引导您完成问题。我强烈建议您仔细阅读，因为以下只是摘录。

将数据传播为道具

我认为您的商店已成功连接到您的根组件。否则，您应该再次检查上述文档。 同时验证您是否安装了react-redux bindings。 使用此绑定，您可以轻松使用connect - API将组件连接到redux存储。

在组件中，您返回一个条目为entries的对象：

return {
    entries: filterState.entries
}

因此，您必须在render函数中正确调用此条目：

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