React Redux thunk - 操作覆盖意外信息

Question

我正在构建一个 reddit 克隆，获取顶部 post。该应用程序应该有一个收藏夹 post CRUD。所以我构建的是两列布局，左侧是 post 列表，右侧部分有 post 开关打开时的详细信息或收藏夹列表。

所有这些都由两个 reducer 处理：favorites 和 post。问题是：当我触发设置收藏夹操作时，由于某种原因，这会覆盖 post 数据。我刚刚检查了整个流程几次，我无法确定发生了什么。

这是 redux 开发工具状态，post 已获取，然后显示收藏夹操作

这是收藏夹减速器：

import {
  FETCH_FAVORITES_REQUEST,
  FETCH_FAVORITES_SUCCESS,
  FETCH_FAVORITES_ERROR,
  SHOW_FAVORITES
} from '../constants';

const initialState = {
  data: [],
  isLoading: false,
  error: false,
  show: false
};

const favorites = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_FAVORITES_REQUEST:
      return {
        ...state,
        isLoading: true
      };
    case FETCH_FAVORITES_SUCCESS: {
      return {
        ...state,
        isLoading: false,
        data: action.payload
      };
    }
    case FETCH_FAVORITES_ERROR:
      return { ...state, error: true, isLoading: false };

    case SHOW_FAVORITES:
      return { ...state, show: !state.show };

    default:
      return initialState;
  }
};

export default favorites;

这是 posts reducer:

import {
  FETCH_POST_REQUEST,
  FETCH_POST_SUCCESS,
  FETCH_POST_ERROR,
  SET_READED,
  DISMISS_ALL,
  DISMISS_POST
} from '../constants';

const initialState = {
  data: [],
  isLoading: false,
  error: false,
  lastFetched: null,
  allDismissed: false
};

const posts = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_POST_REQUEST:
      return {
        ...state,
        isLoading: true
      };
    case FETCH_POST_SUCCESS: {
      const data = [...state.data, ...action.payload];
      return {
        ...state,
        data,
        lastFetched: action.lastFetched,
        isLoading: false,
        allDismissed: false
      };
    }
    case FETCH_POST_ERROR:
      return { ...state, error: true, isLoading: false };
    case SET_READED: {
      const newData = state.data;
      const foundIndex = newData.findIndex((x) => x.id === action.payload);
      newData[foundIndex].readed = true;
      return {
        ...state,
        data: newData
      };
    }
    case DISMISS_ALL: {
      return {
        ...state,
        allDismissed: true,
        data: []
      };
    }
    case DISMISS_POST: {
      return {
        ...state,
        data: state.data.filter((post) => post.id !== action.payload)
      };
    }

    default:
      return initialState;
  }
};

export default posts;

这是调度显示收藏夹操作的组件：

import React from 'react';
import styled, { css } from 'styled-components';
import Toggle from 'react-toggle';
import { useDispatch, useSelector } from 'react-redux';
import { useMediaQuery } from 'react-responsive';

import { DEVICE_SIZE } from '../constants';
import { showFavorites } from '../actions/favorites';

const ToogleFavorites = styled.div`
  position: fixed;
  bottom: 5%;
  right: 5%;
  text-align: end;
  z-index: 2;

  ${({ isMobile }) =>
    isMobile &&
    css`
      font-size: small;
    `}
`;

export default () => {
  const dispatch = useDispatch();
  const { show } = useSelector((state) => state.favorites);

  const isTabletOrBigger = useMediaQuery({ minDeviceWidth: DEVICE_SIZE.tablet });
  const handleToogle = () => dispatch(showFavorites());

  return (
    <ToogleFavorites isMobile={isTabletOrBigger}>
      <Toggle defaultChecked={show} onChange={handleToogle} />
      <div>Toogle favorites</div>
    </ToogleFavorites>
  );
};

收藏夹操作（似乎没什么大不了的）：

export const showFavorites = () => ({
  type: SHOW_FAVORITES
});

让我知道任何额外的信息。非常感谢！

Answer 1

你的 reducer 的默认大小写为 return intialState，这意味着任何未明确处理的操作都会重置状态。你想 return state 相反。

React Redux thunk - 操作覆盖意外信息

React Redux thunk - Action is overriding unexpected information

thunk

reactjs

redux

react-hooks