react-redux：调度时的无限循环答案

【问题标题】：react-redux: infinite loop on dispatchreact-redux：调度时的无限循环
【发布时间】：2021-01-02 02:42:52
【问题描述】：

我有一个从 Spring 引导后端加载条目的示例应用程序。但是，我的方法会导致我无法向自己解释的无限循环。

api.ts

class CommonApi extends BaseApi {
  public loadEntries = () => this.get('http://localhost:8080/radars/development/entries') as Promise<any>;
}

entriesSlice.ts

interface EntriesState {
    map: {}
}

const initialState: EntriesState = {
    map: {}
};

export const entriesSlice = createSlice({
    name: 'entries',
    initialState,
    reducers: {
        getEntries: (state, action: PayloadAction<any>) => {
            state.map = action.payload;
        },
    },
});

export const { getEntries } = entriesSlice.actions;

export const getEntriesAction = (): AppThunk => dispatch => {
    return commonApi.loadEntries().then(payload => {
        const newPayload: any[] = [];

        payload.map((entry: any) => {
            return newPayload.push({
                label: entry.label,
                quadrant: toSegment(entry.category),
                ring: toRing(entry.status)
            })
        })

        dispatch(getEntries(newPayload));
    }).catch(err => {
        console.error('error: ', err)
    })
};

export const entriesObject = (state: RootState) => state.entries.map;

export default entriesSlice.reducer;

我想我已经发现 entrySlice.ts 中的这一行会导致错误，但我不知道为什么：

state.map = action.payload;

App.tsx

import { entriesObject, getEntriesAction } from "../../features/entries/entriesSlice";
import { config1Object, getConfig1Action } from "../../features/config1/config1Slice";

function App() {
  const config1 = useSelector(config1Object) as any;
  const entries = useSelector(entriesObject) as any;
  const dispatch = useDispatch();
  const [value, setValue] = useState(0);

  useEffect(() => {
    dispatch(getConfig1Action());
    dispatch(getEntriesAction());
  }, [config1, entries, dispatch]);

  return (
    <Container>
      <TabPanel value={value} index={0}>
        <Chart config={config1} entries={entries} />
      </TabPanel>
    </Container>
  );
}

我做错了什么？

【问题讨论】：

标签： reactjs redux react-redux redux-thunk flux

【解决方案1】：

您将 entries 作为 useEffect 的依赖项 - 每次发送 getEntriesAction 时，它都会获取条目并在状态下创建一个新对象，这告诉 react entries 已更新（这是一个新对象有一个新的引用），它重新运行useEffect，它再次分派getEntriesAction，这...导致一个无限循环。

【讨论】：

这解决了我的问题。但是，如果条目确实发生了变化怎么办？例如通过添加一个新条目？ useEffect 不需要再执行一次吗？
这取决于entries 更新时您需要做什么，但我猜您可能不想在他们这样做时从 API 重新加载它们（和/或配置）？如果您确实需要在条目更新时做一些事情，但不重新加载它们，您可以将这些事情移动到一个单独的 useEffect ，它具有 entries 作为依赖项。或者，您可以在重新加载周围放置一个 if 条件，这样它就不会在对 entries 的任何更新时发生。
仪表板的用户可以在图表中添加新条目，因此我需要在添加新条目后更新视图。