Redux useSelector 中的qualityFn 不适用于对象和数组

Question

我认为 useSelector 中的qualityFn 不能正常工作。它适用于简单的字符串/数字，但不适用于对象和数组。在这种情况下，它总是使 'item' 和 'prevItem' 相等。在此处检查示例：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { connect, Provider, useSelector, useDispatch } from 'react-redux';
import './style.css';

const countReducer = (state = { count: [] }, action) => {
  switch (action.type) {
    case 'INC': 
      state.count.push('1')
      return state;
    default: return state;
  }
}

const reducers = combineReducers({
  counter: countReducer,
})

const store = createStore(reducers);

function App () {
  const dispatch = useDispatch()
  const count = useSelector(state => state.counter.count, (item, previousItem) => {
    console.log('old')
    console.log(previousItem)
    console.log('new')
    console.log(item)
    if (item.length === previousItem.length) {
      console.log('Equal')
      return true
    } else {
      console.log('Not Equal')
      return false
    }
  })
  return (
    <div>
      <button onClick={() => dispatch({
        type: 'INC'
      })}>Increment</button>
      <div>Value: {count[0]}</div>
    </div>
  )
}

const AppContainer = connect()(App);

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

Answer 1

state.count.push('1')

不要改变状态。

redux 的核心概念之一是状态是不可变的。由于假定状态是不可变的，因此只需进行超快速的引用相等性检查（即===）即可判断状态是否已更改。如果你通过改变状态违反了这个假设，那么之前的状态和之后的状态是同一个对象，所以看起来实际上没有改变。

相反，创建一个新数组。使用传播语法，您可以这样做：

case 'INC': 
  return {
    ...state,
    count: [...state.count, '1']
  }

另请参阅他们在此页面上的建议：不可变更新模式