javascript - React Native Flatlist 不重新渲染 Redux

Question

当我从 redux 传递的 props 发生变化时，我的 FlatList 不会更新。每次我发送消息时，我都会增加 Firebase 和 Redux 存储中每个人的未读消息计数。我确保包含 key 提取器和额外数据，但两者都没有帮助。唯一改变未读消息计数的是设备的重新加载。如何确保 flatList 使用 MapStateToProps 进行更新。我确保使用 Object.Assign 创建一个新对象:

行动:

export const sendMessage = (
  message,
  currentChannel,
  channelType,
  messageType
) => {
  return dispatch => {
    dispatch(chatMessageLoading());
    const currentUserID = firebaseService.auth().currentUser.uid;
    let createdAt = firebase.database.ServerValue.TIMESTAMP;
    let chatMessage = {
      text: message,
      createdAt: createdAt,
      userId: currentUserID,
      messageType: messageType
    };


    FIREBASE_REF_MESSAGES.child(channelType)
      .child(currentChannel)
      .push(chatMessage, error => {
        if (error) {
          dispatch(chatMessageError(error.message));
        } else {
          dispatch(chatMessageSuccess());
        }
      });

    const UNREAD_MESSAGES = FIREBASE_REF_UNREAD.child(channelType)
      .child(currentChannel).child('users')

    UNREAD_MESSAGES.once("value")
      .then(snapshot => {
        snapshot.forEach(user => {
          let userKey = user.key;
          // update unread messages count
          if (userKey !== currentUserID) {
            UNREAD_MESSAGES.child(userKey).transaction(function (unreadMessages) {
              if (unreadMessages === null) {
                dispatch(unreadMessageCount(currentChannel, 1))
                return 1;
              } else {
                alert(unreadMessages)
                dispatch(unreadMessageCount(currentChannel, unreadMessages + 1))
                return unreadMessages + 1;
              }
            });
          } else {
            UNREAD_MESSAGES.child(userKey).transaction(function () {
              dispatch(unreadMessageCount(currentChannel, 0))
              return 0;
            });
          }
        }
        )
      })
  };
};

export const getUserPublicChannels = () => {
  return (dispatch, state) => {
    dispatch(loadPublicChannels());
    let currentUserID = firebaseService.auth().currentUser.uid;
    // get all mountains within distance specified
    let mountainsInRange = state().session.mountainsInRange;
    // get the user selected mountain
    let selectedMountain = state().session.selectedMountain;

    // see if the selected mountain is in range to add on additional channels
    let currentMountain;
    mountainsInRange
      ? (currentMountain =
        mountainsInRange.filter(mountain => mountain.id === selectedMountain)
          .length === 1
          ? true
          : false)
      : (currentMountain = false);

    // mountain public channels (don't need to be within distance)
    let currentMountainPublicChannelsRef = FIREBASE_REF_CHANNEL_INFO.child(
      "Public"
    )
      .child(`${selectedMountain}`)
      .child("Public");

    // mountain private channels- only can see if within range
    let currentMountainPrivateChannelsRef = FIREBASE_REF_CHANNEL_INFO.child(
      "Public"
    )
      .child(`${selectedMountain}`)
      .child("Private");

    // get public channels
    return currentMountainPublicChannelsRef
      .orderByChild("key")
      .once("value")
      .then(snapshot => {
        let publicChannelsToDownload = [];

        snapshot.forEach(channelSnapshot => {
          let channelId = channelSnapshot.key;
          let channelInfo = channelSnapshot.val();
          // add the channel ID to the download list

          const UNREAD_MESSAGES = FIREBASE_REF_UNREAD.child("Public")
            .child(channelId).child('users').child(currentUserID)
          UNREAD_MESSAGES.on("value",snapshot => {
              if (snapshot.val() === null) {
                // get number of messages in thread if haven't opened
                dispatch(unreadMessageCount(channelId, 0));
              } else {
                dispatch(unreadMessageCount(channelId, snapshot.val()));
              }
            }
            )
          publicChannelsToDownload.push({ id: channelId, info: channelInfo });
        });

        // flag whether you can check in or not
        if (currentMountain) {
          dispatch(checkInAvailable());
        } else {
          dispatch(checkInNotAvailable());
        }

        // if mountain exists then get private channels/ if in range
        if (currentMountain) {
          currentMountainPrivateChannelsRef
            .orderByChild("key")
            .on("value", snapshot => {
              snapshot.forEach(channelSnapshot => {
                let channelId = channelSnapshot.key;
                let channelInfo = channelSnapshot.val();


                const UNREAD_MESSAGES = FIREBASE_REF_UNREAD.child("Public")
                  .child(channelId).child('users').child(currentUserID)
                UNREAD_MESSAGES.on("value",
                  snapshot => {
                    if (snapshot.val() === null) {
                      // get number of messages in thread if haven't opened
                      dispatch(unreadMessageCount(channelId, 0));
                    } else {
                     dispatch(unreadMessageCount(channelId, snapshot.val()));
                    }
                  }
                  )
                publicChannelsToDownload.push({ id: channelId, info: channelInfo });
              });
            });
        }
        return publicChannelsToDownload;
      })

      .then(data => {
        setTimeout(function () {
          dispatch(loadPublicChannelsSuccess(data));
        }, 150);
      });
  };
};

reducer :

case types.UNREAD_MESSAGE_SUCCESS:
        const um = Object.assign(state.unreadMessages, {[action.info]: action.unreadMessages});
    return {
      ...state,
      unreadMessages: um
    };

容器 - 在内部，我将 map 状态与未读消息的 props 连接起来，并作为 props 传递给我的组件:

const mapStateToProps = state => {
return {
  publicChannels: state.chat.publicChannels,
  unreadMessages: state.chat.unreadMessages,
};
}

组件:

render() {
    // rendering all public channels
    const renderPublicChannels = ({ item, unreadMessages }) => {
      return (
        <ListItem
          title={item.info.Name}
          titleStyle={styles.title}
          rightTitle={(this.props.unreadMessages || {} )[item.id] > 0 && `${(this.props.unreadMessages || {} )[item.id]}`}
          rightTitleStyle={styles.rightTitle}
          rightSubtitleStyle={styles.rightSubtitle}
          rightSubtitle={(this.props.unreadMessages || {} )[item.id] > 0 && "unread"}
          chevron={true}
          bottomDivider={true}
          id={item.Name}
          containerStyle={styles.listItemStyle}
        />
      );
    };


    return (
        <View style={styles.channelList}>
          <FlatList
            data={this.props.publicChannels}
            renderItem={renderPublicChannels}
            keyExtractor={(item, index) => index.toString()}
            extraData={[this.props.publicChannels, this.props.unreadMessages]}
            removeClippedSubviews={false}
          />
        </View>
    );
  }
}

Answer 1

Object.assign会将所有内容合并到作为参数提供的第一个对象中，并返回相同的对象。在redux中，您需要创建一个新的对象引用，否则无法保证更改被拾取。使用这个

const um = Object.assign({}, state.unreadMessages, {[action.info]: action.unreadMessages});
// or
const um = {...state.unreadMessages, [action.info]: action.unreadMessages }