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));

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

任何帮助？

Answer 1

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

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

你让减速机怎么处理？因此，一旦用户点击表单上的日期，请发送操作以记录该操作，例如“DATE_CLICKED”操作，并在reducer中将日期添加到 new 数组以及所有先前的值

像这样：

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

Redux＆＃39; connect＆＃39;没有检测状态数组的变化

1 个答案: