如何使用来自 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 很棒，应该可以指导您解决问题。我强烈建议通读，因为以下只是节选。

将数据传播为 props

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

在您的组件中，您 return 一个包含条目 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);

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

How use data from Redux state?

reactjs

reactjs-flux

react-native

redux

官方文档

将数据传播为 props