Question

我对React / Redux相当新。 redux Chrome devtools告诉我，我已成功创建和修改状态。但是，虽然控制台记录了“dah state”状态＆＃39;运行并令人满意地告诉我，我的州有正确的信息，我当时没有映射到道具。

我不完全确定我的减速机是否正确，但我怀疑这是因为我创造了新的状态，即使它没有映射到道具。

我也非常确定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);

}

Answer 1

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

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

Answer 2

@connect(state => ({
    data: state.module.data
  }), {actoionCreators});

在课程顶部使用它将装饰你的课程并将状态映射到道具

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

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

所以redux知道当loadSuccess调度时，状态会随着加载变为false而变化....

请注意，当发生未知操作时，reduce应返回状态，因此在默认情况下，应返回状态

mapStateToProps由于某种原因没有映射到道具

2 个答案: