Question

我们已经使用redux建立了一个项目。在此项目中，我们从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

Chat.js

function Chat(props) {

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

action.js


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

reducer.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 HOC具有一个options参数，可用于实现自定义比较。

我的建议是在数据已加载/未更改（不知道您的业务逻辑）的情况下，将检查添加到setInfo或调用setInfo的代码中，而不调用API。

即使没有变化，也要重新渲染

1 个答案: