mapStateToProps не относится к реквизитам по какой-то причине

Question

Я довольно новичок в React/Redux. Графические решения hexx отладчика говорят мне, что я успешно создаю и изменяю состояние. Однако, пока консольный журнал «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, в каждом случае вы должны вернуться объект с, например пользовательскими изменениями в состоянии в LOAD_SUCCESS вы должны вернуть объект вроде этого:

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

так перевождь знает, что когда loadSuccess отправляется государство собирается изменения с лоой диньте ложь и ....

обратите внимание, что свёртки должны возвращать состояние, когда неизвестное действие dispathed так что в вашем случае по умолчанию, вы должны вернуть состояние