如何使用Redux-toolkit中的combineSlices避免循环依赖？

Question

当我使用带有createAsynsThunk条件的combineSlices时，我无法避免循环依赖；

我有一个启动我的商店的重击：

// thunk.ts

export const initiateFx = createAsyncThunk<
  InitiatePayload,
  string,
  { state: RootState }
>(
  'initiate-fx',
  async (dashboardId, { dispatch, fulfillWithValue }) => {
    const data = await fetchToSomeApi();

    return fulfillWithValue(data);
  },
  {
    condition: () => true
  }
);

我有一个惰性注入商店：

// store.ts

declare module '@shared/redux/store' {
  // comment: resolve typings for lazy loading slices
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface LazyLoadedSlices extends WithSlice<typeof slice> {}
}

export type State = {
  data: Data;
  isInitialized: boolean;
  isLoading: boolean;
};

const initialState: State = {
  data: null,
  isInitialized: false,
  isLoading: false,
};

export const slice = createSlice({
  name: 'my-slice',
  initialState,
  reducers: {
    reset: () => initialState
  },
  extraReducers: (builder) => {
    builder.addCase(initiateFx.pending, (state) => {
      state.isLoading = true;
    });

    builder.addCase(initiateFx.fulfilled, (state, action) => {
      state.data = action.payload;
      state.isInitialized = true;
      state.isLoading = false;
    });
  },
  selectors: {
    selectIsInitialized: (state) => state.dashboardId,
    selectIsLoading: (state) => state.isLoading,
    selectData: (state) => state.data
  }
});

export const { actions, selectors } = slice.injectInto(rootReducer);

然后，我想在我的thunk中添加条件以防止不必要的请求

// ...
{
  condition: (_, { getState }) => {
    const state = getState();
    
    const isLoading = selectors.selectIsLoading(state);
    const isInitialized = selector.selectIsInitalized(state);

    return !isLoading && !isInitialized;
  }
}
// ...

我得到了一个循环依赖 store.ts -> thunk.ts -> store.ts

我不知道如何解决这个问题

Answer 1

要消除两个文件之间的依赖循环，您只需要使用单独的选择器函数，这些函数未在切片文件中声明。

• 内联示例：

  export const initiateFx = createAsyncThunk<
    InitiatePayload,
    string,
    { state: RootState }
  >(
    'initiate-fx',
    async (dashboardId, { dispatch, fulfillWithValue }) => {
      const data = await fetchToSomeApi();
  
      return fulfillWithValue(data);
    },
    {
      condition: (_, { getState }) => {
        const state = getState();
  
        const isLoading = state.[...path...].isLoading;
        const isInitialized = state.[...path...].dashboardId;
  
        return !isLoading && !isInitialized;
      }
    }
  );
  

• 功能：

  const selectIsInitialized = (state: RootState) => state.[...path...].dashboardId,
  const selectIsLoading: (state: RootState) => state.[...path...].isLoading,
  

  export const initiateFx = createAsyncThunk<
    InitiatePayload,
    string,
    { state: RootState }
  >(
    'initiate-fx',
    async (dashboardId, { dispatch, fulfillWithValue }) => {
      const data = await fetchToSomeApi();
  
      return fulfillWithValue(data);
    },
    {
      condition: (_, { getState }) => {
        const state = getState();
  
        const isLoading = selectIsLoading(state);
        const isInitialized = selectIsInitialized(state);
  
        return !isLoading && !isInitialized;
      }
    }
  );