标签: redux-toolkit

我昨天刚开始使用 redux，在阅读了不同的库后，我决定使用 RTK 的切片路线。

对于我的异步，我决定使用 RTK 查询，而不是使用 createAsyncThunk，并且我有一个关于从另一个切片访问状态的正确方法的问题。

slice1 包含一些用户数据，例如：

export const initialState: IUserState = {
   name: 'example',
   id: null,
};

在我的 slice2 中，我有一个函数想要执行getSomethingByUserId(id)和我当前的实现之类的操作：

interface IApiResponse {
  success: true;
  result: IGotSomethingData[];
}

const getsomethingSlice: any = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://someapibase',
  }),
  endpoints(builder) {
    return {
      fetchAccountAssetsById: builder.query<IApiResponse, null>({
        query() {
          console.log('store can be called here', store.getState().user.id);
          return `/apipath?id=${store.getState().user.id}`;
        },
      }),
    };
  },
});

export default getsomethingSlice;
export const { useFetchAccountAssetsByIdQuery } = getsomethingSlice;

正如我在某处读到的，markikson 提到导入 …

我正在将我的 React / Redux 应用程序移动到 Redux 工具包，并按照此处给出的说明进行操作。

我的自定义选择器和调度，根据文档。

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/index";

export const useMyDispatch = () => useDispatch<AppDispatch>();
export const useMySelector: TypedUseSelectorHook<RootState> = useSelector;

useMyDispatch 的类型是useMyDispatch(): Dispatch<AnyAction>

类型GETALLPAGESACTION是

export type GETALLPAGESACTION = {
  pagesLoading?: boolean;
  pages?: PageType[] | null;
  error?: Error | null;
}

这是我非常基本的行动：

export const getAllPages = createAsyncThunk<GETALLPAGESACTION, 
 string,
 { dispatch: AppDispatch; state: RootState; }>("pages/getAllPages", 
   async () => { …

任何人都遇到过这个问题，并且对您为解决此问题所做的工作有大致的了解或修复。我只需要朝着正确的方向推动。

我有一个 thunk 动作是由createAsyncThunk. 我想在调用 api 更新状态之前调度一个操作。

我不想要 use 操作getProducts.pending，因为我想要调度actionLoading()其他 thunk 操作。

我怎样才能做到呢？谢谢！

export const getProducts = createAsyncThunk("getProducts", async () => {

  // I want dispatch action actionCallAPIPending like that
  // dispatch(actionLoading());
  const response = await axios.get("api");
  return response;
});

我正在尝试在我们当前的应用程序中实现无限滚动功能；

我们首先获取页面的前 5 个“帖子”。滚动到页面底部后，我们会获取接下来的 5 篇帖子。

这很好用，但是使用相同的查询意味着现有数据（前 5 个帖子）已被新数据替换。

是否可以将现有数据与新数据合并？

我可以将它们合并到位，例如使用类似的内容；const posts = [newPosts, oldPosts]但如果现有数据被修改，我们就会失去 RTK 查询提供的数据失效。

对于这种情况，推荐的方法是什么？

在console.log()reducer 操作中使用时，状态打印为 Proxy 对象，而不是我实际想要查看的对象。如何看到实物？我正在使用 redux-starter-kit createSlice，我不确定这是否与它有关。

import { createSlice } from "redux-starter-kit";

export interface IToDo {
    id: number;
    name: string;
    complete: boolean;
}

const initialState: IToDo[] = [
    {
        id: 1,
        name: 'Read a bit',
        complete: true
    }
];

const { actions, reducer } = createSlice({
    slice: "todos",
    initialState,
    reducers: {
        toggleTodo(state: IToDo[], action) {
            const todo = state.find(todo => todo.id === action.payload);
            console.log(todo);
            if (todo) {
                todo.complete = !todo.complete;
            }
        }
    }
})

export const toDosReducer = …

Redux 工具包文档提到在多个减速器中使用操作（或者更确切地说是操作类型）

首先，Redux 操作类型并不意味着专用于单个切片。从概念上讲，每个切片缩减器“拥有”自己的 Redux 状态片段，但它应该能够侦听任何操作类型并适当地更新其状态。例如，许多不同的切片可能希望通过清除数据或重置回初始状态值来响应“用户注销”操作。在设计状态形状和创建切片时请记住这一点。

但是，“记住这一点”，鉴于工具包将切片名称放在每个动作类型的开头，实现这一目标的最佳方法是什么？并且您从该切片导出一个函数并调用该单个函数来分派动作？我错过了什么？这是否必须以某种不使用的方式完成createSlice？

这是根据页面返回数据的钩子

    const {
        data,
        isFetching,
        isLoading,
        isError,
    } = useGetResourceQuery(page, perPage );

这是 API

    export const api = createApi({
        baseQuery: fetchBaseQuery({
            baseUrl: "http://localhost:3001",
        
        }),
        tagTypes: ["resource"],
        endpoints: (build) => ({
            getResource: build.query({
            query: (page = 1, perPage = 20) =>
                `resource?spage=${page}&limit=${perPage}`,
            }),
        }),
    });
    export const {useGetResourceQuery} = api

有什么方法可以提取所有查询的状态吗？我想实现基于滚动的分页（无限滚动）需要更新中间件吗？或者有什么方法可以访问状态并将其公开为上面的函数，我浏览了文档但找不到解决方案

我可以使用本地状态并将它们连接起来，但想知道是否可以使用 RTK

谢谢

我想将 isAuthenticated 状态保留在本地存储中，因此刷新页面后，用户将登录。我尝试直接在 localStorage 中将其设置为 true/false 并将 redux 中状态的初始值设置为此value，但它总是将其设置为 true。

这是我的 redux 商店

import { createSlice, configureStore } from '@reduxjs/toolkit';

//MOVEMENTS (doesn't work yet)
const initialMovementsState = {
  movements: [],
};

const movementsSlice = createSlice({
  name: 'movements',
  initialState: initialMovementsState,
  reducers: {
    add(state) {
      //nothing yet
    },
    decrement(state) {
      //nothing yet
    },
  },
});

//LOGGING IN/OUT
const initialAuthState = {
  isAuthenticated: false,
};

const authSlice = createSlice({
  name: 'auth',
  initialState: initialAuthState,
  reducers: {
    login(state) {
      state.isAuthenticated = true;
    },
    logout(state) { …

我是 React 新手，正在尝试通过编码来学习。

我需要一些代码方面的帮助/建议，将此 Redux 存储转换为 Redux Toolkit。这里我使用一个名为configureStore的函数。将其更改为使用来自“@reduxjs/toolkit”的“configureStore”的好方法是什么？

这是出于学习目的。那个“createRootReducer”来自我的reducers.js，它结合了

const createRootReducer = (history) => combineReducers({
    articles: articlesReducer,
    selection: selectionReducer,
});

我的store.js文件：

const createRootReducer = (history) => combineReducers({
    articles: articlesReducer,
    selection: selectionReducer,
});