在 createSlice 操作中访问 RTK 查询数据答案

【问题标题】：access RTK-query data in createSlice action在 createSlice 操作中访问 RTK 查询数据
【发布时间】：2023-02-16 19:41:58
【问题描述】：

在 createSlice 减速器中访问 RTK 查询数据的正确方法是什么？

例如，下面代码中的“全选”功能。

是否可以在toggleSelectAll() 操作中访问当前useGetOrdersQuery() 数据？

或者实现“全选/取消全选”的唯一/最佳方法是将useGetOrdersQuery()数据作为动作负载传递给toggleSelectAll()动作？

dashboardSlice.js

const initialState = {
  selectedIds: [],
};
export const dashboardSlice = createSlice({
  name: 'dashboard',
  initialState,
  reducers: {
    toggleSelectAll: (state, action) => {
       //get "useGetOrdersQuery" data id's and assign to state.selectedIds
    }
  }
});

export const { toggleSelectAll } = dashboardSlice.actions;
export const selectSelectedIds = state => state.dashboard.selectedIds;

订单-lsit.js

import { useGetOrdersQuery } from './api'
import { toggleSelectAll, selectSelectedIds } from './dashboardSlice';

const OrdersList = () => {
  const {data} = useGetOrdersQuery(123);
  const dispatch = useDispatch();
  const selectedIds = useSelector(selectSelectedIds);

  return (
    <div>
      <button onClick={() => dispatch(toggleSelectAll())}>
        select/deselect all
      </button>
      {data.map(o => (
        <div>
          <h2>{o.name}</h2>
          <input 
            type="checkbox"
            checked={selectedIds.includes(o.id)}
          />
        </div>
      ))}
    </div>
  )
}

api.js

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getOrders: builder.query({
      query: (userId) => `${userId}/orders`,
      providesTags: [{ type: 'Orders', id: 'LIST' }]
    })
  })
});

export const { useGetOrdersQuery } = api;

【问题讨论】：

标签： redux-toolkit rtk-query

【解决方案1】：

如果您只想保存 ID，您可以这样做：

const initialState = {
  selectedIds: [],
};
export const dashboardSlice = createSlice({
  name: 'dashboard',
  initialState,
  reducers: {
    toggleSelectAll: (state, action) => {
       //get "useGetOrdersQuery" data id's and assign to state.selectedIds
       const { ids }  = action.payload;
       state.selectedIds = ids;
       return state;
    }
  }
});

export const { toggleSelectAll } = dashboardSlice.actions;
export const selectSelectedIds = state => state.dashboard.selectedIds;

和

import { useGetOrdersQuery } from './api'
import { toggleSelectAll, selectSelectedIds } from './dashboardSlice';

const OrdersList = () => {
  const {data} = useGetOrdersQuery(123);
  const dispatch = useDispatch();
  const selectedIds = useSelector(selectSelectedIds);


  // you can pass the list of ids as a payload to your action and store it for later use.
  return (
    <div>
      <button onClick={() => dispatch(toggleSelectAll({ids: data.map(item => item.id}))}>
        select/deselect all
      </button>
      {data.map(o => (
        <div>
          <h2>{o.name}</h2>
          <input 
            type="checkbox"
            checked={selectedIds.includes(o.id)}
          />
        </div>
      ))}
    </div>
  )
}

你也有这样的事情：看看这个link

const store = useStore();
const allDataOfAllQueries = store.getState().api.queries;
console.log(Object.values(allDataOfAllQueries);

【讨论】：