Javascript mapStateToProps不'；因为某些原因，我无法映射到道具

我对React/Redux相当陌生。redux Chrome开发工具告诉我，我正在成功地创建和修改状态。然而，尽管控制台日志“dah state”运行并令人满意地告诉我，我的状态中包含正确的信息，但此时我并没有映射到道具

我不完全确定我的减速器是否制作正确，但我怀疑这是因为我正在创建新的状态，即使它没有映射到道具

我还相当肯定mapStateToProps在运行时不会触发重新渲染

这是我的相关容器

import React, { Component, PropTypes } from 'react';
    import TopicsGrid from '../components/TopicsGrid.jsx';
    import { connect } from 'react-redux';
    import { fetchTopics } from '../actions/topics';
    import Main from '../components/Main.jsx';

    class AboutContainer extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                topics: [{
                    title: '',
                    description: '',
                    link: '',
                    src: '',
                    message: '',
                    selected: false,
                    _id: ''
                }]
            }
        }
        onChange = (action) => {
            this.props.dispatch(action);
        }
        componentDidMount() {
            fetchTopics();
        }
        componentWillReceiveProps(nextProps) {
            console.log('nextProps', nextProps)
            this.setState({
                topics: nextProps.topics
            })
        }
        render() {
            console.log('PROPS', this.props)
            return (
                <div className="container">
                    <TopicsGrid 
                    topics={this.state.topics} 
                    onChange={this.onChange}/>
                </div>
            );
        }
    };

    AboutContainer.propTypes = {
        dispatch: PropTypes.func.isRequired,
        topics: PropTypes.array.isRequired
    };

    AboutContainer.defaultProps = {
        state: {
            topics: [{
                    title: '',
                    description: '',
                    link: '',
                    src: '',
                    message: '',
                    selected: false,
                    _id: ''
                }]
        }
    };

    const mapDispatchToProps = (dispatch) => {
        return {
            dispatch: dispatch
        }
    }
    const mapStateToProps = (state) => {
        console.log('dah state', state)
        return Object.assign({}, state, {
            topics: state.topics.topics
        })
    }

    export default connect(mapStateToProps, mapDispatchToProps)(AboutContainer);

import * as types from '../constants/action-types';
import * as SectionNames from '../constants/section-names';

const initialState = {
    topics: []
}

export default function about(state = initialState, action) {
    if (action.section !== SectionNames.TOPICS) {
        return state;
    }

    let mods = {};
    switch (action.type) {
        case types.FETCH_TOPICS_SUCCESS:
            mods = {
                    topics: action.topics
                }
                // return Object.assign({}, state, {
                // topics: action.topics
                // });
            break;

        case types.FETCH_TOPICS_ERROR:
            mods = {
                    topics: action.topics
                }
                // return Object.assign({}, state, {
                //     topics: action.topics
                // });
            break;

        case types.TOPIC_SELECTED:
            console.log('selected')
            //topic can be selected or unselected
            //only one topic can be selected at once.
            mods = {
                    topics: action.topics
                }
            mods.topics[action.index].selected = true;
            return Object.assign({}, state, mods);
            break;

        case types.TOPIC_UNSELECTED:
            //topic can be selected or unselected
            //only one topic can be selected at once.
            mods = {
                    topics: action.topics
                }
            mods.topics[action.index].selected = false
            break;
        default:
            return state;
    }

    return Object.assign({}, state, mods);

}

---

由于您使用的是MapStateTrops，因此可以直接使用道具，而不是将它们传递到组件状态

render() {
    const { topics } = this.props
    return (
        <div className="container">
            <TopicsGrid 
                topics={topics}
                onChange={this.onChange}
            />
        </div>
    );
}

render（）{
const{topics}=this.props
返回(
);
}

在你的课堂上使用它，它将装饰你的课堂，并将状态映射到道具上

在您的模块中，您必须打开action.type，在每种情况下，您都应该返回一个状态发生自定义更改的对象，例如，在LOAD_SUCCESS中，您必须返回如下所示的对象：

return {
...state,
loading:false,
loaded:true,
data:action.data
  }

所以redux知道，当loadSuccess调度时，状态将随着加载更改为false和

---

请注意，reduce应该在未知操作发生时返回state，因此在默认情况下，您应该返回state

您应该只映射组件使用的状态部分，否则shouldComponentUpdate中的浅属性检查将比它需要的更频繁地返回true，从而降低应用程序的效率。改为从React.PureComponent扩展，浅层检查已经在那里了。如果您能提供帮助，还可以避免将道具指定给组件状态。

return {
...state,
loading:false,
loaded:true,
data:action.data
  }