如何使用来自 Redux 状态的数据？

Question

我是 Redux 和 React 的新手。

我用行动改变了数据，他们改变了！ 我进入 React 组件状态。如下：

如何从中提取数据并使用它来渲染组件？ New 组件

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

官方文档

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