Redux“连接”未检测到状态数组更改

Question

我已经使用 reducer 设置了 redux，它可以更新给定日期的时隙数组。每次更改日期时，reducer 都会更新状态（我已经在控制台记录了状态更改，这在我的 mapStateToProps 函数中按预期发生），但是，redux connect 函数没有检测到时隙数组已更新。这是我的减速器：

import { SHOW_ERROR, HIDE_ERROR, SHOW_SUCCESS, HIDE_SUCCESS, UPDATE_TIME_SLOTS } from '../actions/types';

const INITIAL_STATE = { error: null, success: null, timeSlots: null };

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case SHOW_ERROR:
      return { ...state, error: action.payload };
    case HIDE_ERROR:
      return { ...state, error: action.payload };
    case SHOW_SUCCESS:
      return { ...state, success: action.payload };
    case HIDE_SUCCESS:
      return { ...state, success: action.payload };
    case UPDATE_TIME_SLOTS:
      return { ...state, timeSlots: action.payload };
    default:
      break;
  }
  return state;
}

时隙总是这样的数组：

["08:30", "09:15", "10:00", "10:45", "11:30", "12:15", "13:00", "13:45", "14:30", "15:15", "16:00", "16:45"]

这是我的 mapStateToProps 函数，它使用 redux connect 将这些道具发送到我的 BookingForm（这是我的 console.log 正确检测到状态变化的地方：

function mapStateToProps(state) {
  console.log(state.public.timeSlots);
  return {
    timeSlots: state.public.timeSlots
  };
}

export default connect(mapStateToProps, { create, getAvailableSlots })(form(BookingForm));

每次我单击表单中的日期时，状态都会使用新数组进行更新，但是，我的连接函数不会检测到此更新，因此 BookingForm 组件不会重新呈现。我假设这与数组不可变地更新有关，但是，我还没有找到设计它的解决方案，以便它不可变地更新。

有什么帮助吗？

Answer 1

您可能正在发送相同的数组实例，而connect 函数仅检查参考更改！顺便说一句：对象也一样。

connect 不会检测到使用相同的数组，每次要更新状态时都必须创建一个新数组。

你让减速器处理这个怎么样？ 因此，一旦用户单击表单上的日期，发送一个动作来记录它，比如“DATE_CLICKED”动作，然后在 reducer 中，将日期与所有以前的值一起添加到 new 数组中.

像这样：

  return [...state.dates, action.date]