小编Lin*_*ste的帖子

==================== TLDR ==========================

@markerikson（请参阅已接受的答案）亲切地指出了当前的解决方案和未来的解决方案。

编辑：2020 年 11 月 15 日：链接到文档以在 Slice 中使用 Async Thunk

RTK确实支持使用 thunk 中间件的 reducer 中的 thunk（参见答案）。

在 1.3.0 版本（目前 alpha 于 2020 年 2 月）中，有一个辅助方法createAsyncThunk() createAsyncThunk将提供一些有用的功能（即根据 Promise的状态触发 3 个“扩展”reducer）。

ReduxJS/Toolkit NPM 发布

========================原始帖子 2020 年 2 月====================== ====

我对 Redux 很陌生，遇到了 Redux Toolkit (RTK) 并希望实现它提供的更多功能（或者在这种情况下可能没有？）（2020 年 2 月）

我的应用程序分派到通过创建的减速器切片createSlice({})（请参阅createSlice api docs）

到目前为止，这非常有效。我可以轻松地使用内置dispatch(action)和useSelector(selector)调度动作，并在我的组件中很好地接收/响应状态变化。

我想使用 axios 的异步调用从 API …

在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 = …

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

    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

谢谢

我在y轴上有一个溢出 div，并希望它恰好是屏幕高度的 80%。现在我的这个<div class="overflow-y-auto h-96">可以工作了，但是高度必须大于 96，恰好是整个屏幕的 80%（为页眉和页脚留出空间）。

使用起来h-4/5好像不行。

    <div class="h-4/5 bg-yellow-200 overflow-hidden">
        <div class="overflow-y-auto bg-yellow-500 space-y-3">
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            </div>
        </div>
    </div>

更新：我得到了这个（也可以在这里https://play.tai​​lwindcss.com/NlZdzWfkyD）但是如果我取消注释顶栏它会失败，请问，有什么想法吗？

<div class="h-screen">
  <div class="h-full">
    <!--<div class="bg-blue-400 py-3">topbar</div>-->

    <div class="pl-6 pr-16 pt-12 h-full">
      <div class="h-full border border-gray-200 rounded-t-xl px-20 pt-3 flex …

我有一个应用程序，我在其中使用 3 Context Provider。要使应用程序正常工作，我必须将 <App/>所有这些providers. 随着我的应用程序的增长，我希望有更多的提供程序来处理我必须连接的更多类型的数据。我已经开始觉得可能有更好的方法将提供者传递到<App />.

我的App.js代码：

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { Provider as BlogProvider} from './src/context/BlogContext';
import { Provider as VehicleProvider} from './src/context/VehicleContext';
import { Provider as AuthProvider} from './src/context/AuthContext';

import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';
import VehicleScreen from './src/screens/VehicleScreen';

const navigator = createStackNavigator(
  {
    Index: IndexScreen, …

我目前正在尝试Tanstack Table，这是一个很棒的库！

我想做的是建立一个如下所示的表：

我的数据来自以下类型的 API：

type Accounting = {
  category: string;
  total: number; // Sum of all expenses
  expenses: {
    name: string;
    value: number;
  }[];
};

这是我到目前为止所得到的：

const columns = React.useMemo(
    () => [
      columnHelper.accessor("category", {
        header: "Category",
        id: "category",
        cell: (info) => {
          return (
            <>
              {info.row.getCanExpand() && (
                <button
                  {...{
                    onClick: info.row.getToggleExpandedHandler(),
                    style: { cursor: "pointer" },
                    className: "mr-2",
                  }}
                >
                  {info.row.getIsExpanded() ? (
                    <Chevron direction="down" />
                  ) : (
                    <Chevron direction="right" />
                  )}
                </button>
              )} …

我有一个 NextJS React 应用程序，它使用 next-react-wrapper（基本上是一个 HOC），_app.tsx如下所示：

_app.tsx

...
import withRedux from 'next-redux-wrapper';

class Page extends App<Props> {
  ...
}

export default withRedux(reduxStore)(Page);

store.ts

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import rootReducer from './reducer';

export default (
  initialState: any = undefined,
) => createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware()),
);

我正在努力研究如何在 React 之外访问商店，例如在一个简单的辅助函数中。我的store.ts文件导出了makeStorenext-redux-wrapper HOC 所需的函数（包括初始状态）。

我可以在 React 组件中访问 store 并将其作为参数每次传递给我的辅助函数，但这看起来很混乱。

有没有办法直接从非 React 辅助功能模块访问商店？

我无法设置getState()to的返回类型RootState。我正在使用打字稿和 VSCode。我必须将类型设置为any，这会停止该对象上的 IntelliSense。下面是有问题的代码：

export const unsubscribeMeta = createAsyncThunk(
  'meta/unsubscribe',
  async (_, { getState }) => {
    const { meta } = getState() as any;
    const res = await client.post<apiUnsubscribeResponse>(
      `/meta/unsubscribe/${meta.subscriptionId}`
    );
    return res.data.data;
  }
);

如果我尝试使用RootState而不是any，VSCode 会在模块中标记许多错误。我相信这是由于商店和这个切片的循环依赖。我RootState在模块中的许多地方使用了选择器，没有问题。有没有解决的办法？

从链接中引用。 https://react-redux.js.org/next/api/hooks#performance

我所理解的useSelector钩子的好处是避免包装地狱。由于HOC的使用，包装地狱正在发生。如果一定要使用HOC与由于性能比较的原因，这将是更好的方法来简单地使用HOC呢？因为在任何情况下，我们都将不得不置身于包装器的地狱中。如果地狱不是那么将是。connect React.memo useSelectorconnect connectReact.memo