mapStateToPropsが何らかの理由で小道具にマップされていません

Question

私はReact/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); 

} 

Answer 1

mapStateToPropsを使用しているので、 mをコンポーネント状態に変換します。

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をオンにする必要があり、あなたのモジュールに小道具

にあなたのクラスとマップの状態を飾るだろう

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

のでReduxのloadSuccess状態を派遣する際LOAとのつもり変化があることを知っている：LOAD_SUCCESSで例えば状態では、カスタムの変更を持つオブジェクトは、次のようなオブジェクトを返す必要が不明なアクションがdispathedとき削減

通知が状態を返す必要が虚偽と....に鼎デフォルトの場合、あなたは状態