React перерисовывает даже без изменений

Question

Мы создали проект с редуксом. В этом проекте мы получаем информацию objecat от API и вставляем ее в магазин. Теперь мы заметили, что компоненты функции перерисовываются, даже если API возвращает то же состояние, что и в предыдущем запросе.

Мы думаем, что это потому, что мы перезаписываем магазин, но мы не уверены.

ChatContainer. js

const mapStateToProps = function (state) {
  return {
    content: state.info.content,
    loading: state.info.loading,
  }
}

const ChatContainer = connect(
  mapStateToProps,
)(Chat)
export default ChatContainer

Чат. js

function Chat(props) {

    const { content, loading } = props;
    return (
        <Info content={content} loading={loading} />
    ) 
}

действие. js

export function setInfo(info) {
  return {
    type: SET_INFO, info: {
      content: info,
      loading: false
    }
  }
}

редуктор. js

function setInfo(state = { content: [], loading: true }, action) {
  switch (action.type) {
    case SET_INFO:
      return action.info
    default:
      return state
  }
}

const appReducer = combineReducers({
...
  info: setInfo,
...
})
export default appReducer

Answer 1

Если state.info.content является объектом, каждый раз, когда вы изменяете его с помощью setInfo, у него будет новая ссылка. React-redux делает поверхностное сравнение с результатом mapStateToProps, поэтому, если ваш контент является другой ссылкой каждый раз, когда ваш компонент будет перерисовываться. connect HO C имеет параметр options, который можно использовать для реализации пользовательского сравнения.

Мой совет - добавить проверку к вашему setInfo или к коду, вызывающему setInfo, и не вызывать ваш API, если данные уже загружен / не изменился (не знаю вашего бизнеса логи c).