The component passed to connect () is not displayed

Question

In the code below, if I return only the object topicfrom mapStateToProps, the component is SingleTopicnot re-displayed when the state is updated. But if I return it { topic, state }, the component will be re-rendered.

import React from 'react';
import { connect } from 'react-redux';
import SingleTopic from '../components/SingleTopic';
import { incrementTopicRating, decrementTopicRating } from '../actions/forum';

let mapStateToProps = (state, ownProps) => {
  let topic = state.filter((t) => {
    return +t.id === +ownProps.params.id;
  })[0];

  return { topic };
};

let mapDispatchToProps = (dispatch) => {
  return {
    onUpvote: (id) => { dispatch(incrementTopicRating(id)); },
    onDownvote: (id) => { dispatch(decrementTopicRating(id)); }
  };
};

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

I could have done something wrong, but as I understand it, the component that passed in connectshould be updated automatically when the status is updated. Can someone explain to me where my mistake is?

Dilution:

export default (state = [], action) => {
  switch (action.type) {
    case 'ADD_TOPIC': return addTopic(state, action);
    case 'INCREMENT_TOPIC_RATING': return incrementTopicRating(state, action);
    case 'DECREMENT_TOPIC_RATING': return decrementTopicRating(state, action);
    default: return state;
  }
};

const addTopic = (state, action) => {
  let { title, body, id, rating } = action;
  let newTopic = { title, body, id, rating };
  return [newTopic, ...state];
};

const incrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      topic.rating += 1;
      return topic;
    }
    return topic;
  });
};

const decrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      topic.rating -= 1;
      return topic;
    }
    return topic;
  });
};

UPD The component is SingleTopicdisplayed if I add a second property to the returned object. And this property must be an array or object type, for example:

let foo = [];

return { topic, foo };

Answer 1

incrementTopicRating decrementTopicRating.

:

export default (state = [], action) => {
  switch (action.type) {
    case 'ADD_TOPIC': return addTopic(state, action);
    case 'INCREMENT_TOPIC_RATING': return incrementTopicRating(state, action);
    case 'DECREMENT_TOPIC_RATING': return decrementTopicRating(state, action);
    default: return state;
  }
};

const addTopic = (state, action) => {
  let { title, body, id, rating } = action;
  let newTopic = { title, body, id, rating };
  return [newTopic, ...state];
};

const incrementTopicRating = (state, action) => {
  const newState = state.map((topic) => {
    if (+topic.id === +action.id) {
      return Object.assign({}, topic, { rating: topic.rating+1 });
    }
    return topic;
  });

  return newState;
};

const decrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      return Object.assign({}, topic, { rating: topic.rating-1 });
    }
    return topic;
  });
};

JSBIN : https://jsbin.com/nihabaqumo

, , , facebook Immutable . , .

: map array topic, , ? , incrementTopicRating . ?

map array, object.

react-redux , , SingleTopic ( ), . , , true , . SingleTopic .

: http://rackt.org/redux/docs/Troubleshooting.html

Connect, shouldComponentUpdate, , / : < 3 >

Answer 2

, , :

 if (+topic.id === +action.id) {
      topic.rating -= 1;
      return topic;
 }

:

if (+topic.id === +action.id) {
      return { ...topic, rating: topic.rating - 1 }; 
}