标签: redux-toolkit

我是 redux 和 redux-toolkit 的新手。我正在尝试从 api 获取数据。我收到错误并且无法从 api 接收数据。我正在使用 redux-toolkit 库。

这是我的 App.js：

function App() {

  const companies = useSelector(state => state.companyList);
console.log(companies)
  return (
    <div className="App">
      <header className="App-header">
        {companies.map(company => {
          return(
            <h1>{company.name}</h1>
          )
        })}
        <h1>hello</h1>

      </header>
    </div>
  );
}

export default App;

这是createSlice.js

const getCompanies = axios.get(
  "https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8"
).then((response) => {
    console.log(response.data)
    return response.data;
}).catch((ex) => {
    console.log(ex)
})


export const companySlice = createSlice({
  name: "companyList",
  initialState: {value: getCompanies},
  reducers: {
    addCompnay: (state, action) => {},
  },
}); …

在很长一段时间没有接触 React 之后，我现在重新开始使用 React，我正在查看我之前使用过的 redux 工具包，我看到了 RTK 查询。

我试图理解它，并且认为我已经理解了，但是有一件事我不确定是我遗漏了还是它只是被设计成这样工作的。

我们是否只使用 RTKQ 来获取根本不需要缓存的数据？例如加载用户点击的特定帖子？我这么问是因为在我看过或读过的任何教程中我都没有看到与其他切片的任何交互。

例如，如果我需要获取一些需要保留的信息（否则我只会继续获取它），那么我将使用常规createAsyncThunk?

正如标题所说。这对我来说非常奇怪。

我非常清楚地从categoriesApi.js调用getThisCategory(genre)查询，它应该是：

'https://kitsu.io/api/edge/anime?filter%5Bcategories%5D=${genre}'

但在我的控制台中出现错误：

“获取https://kitsu.io/api/edge/Vampire/anime?limit=20 404”。

在我看来，这就像来自animeApi.js 文件的查询，传入了类型参数。我不知道为什么它要调用这个查询。

请有人帮忙，这真的很令人沮丧。

文件如下：

AnimeApi.js（不应该被调用的查询，但确实是）：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const animeApiHeaders = {
    "Accept": "application/vnd.api+json",
    "Content-Type": "application/vnd.api+json",
};

const baseUrl = 'https://kitsu.io/api/edge';

const createRequest = (url) => ({ url, headers: animeApiHeaders });

export const animeApi = createApi({
    reducerPath: 'animeApi',
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getCategoryOfAnime: builder.query({
            query: (category) =>
                createRequest(`/${category}/anime?limit=20`)
        }),
    })
});

export const { useGetCategoryOfAnimeQuery } = animeApi;

categoriesApi.js（应该调用的查询）：

import { createApi, fetchBaseQuery } from …

“我正在建造一个小型计算器。我试图在本地存储每个输入的数据。我的方法是将 redux 工具包与 redux-persist 结合起来。一切似乎都工作正常，我没有收到任何错误。我的商店正在更新并持续刷新。然而，在使用 useSelector 时，它总是返回为未定义，使用 redux devtools 我可以看到我试图获取的值存在。

Main.js（入口点）

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./store/store";
import { PersistGate } from "redux-persist/integration/react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";
import { persistStore } from "redux-persist";

let persistor = persistStore(store);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
); 

roiCalculationSlice.jsx

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  shifts: …

我一直通过使用 React 和 Redux 创建任务管理器应用程序来学习 Typescript。我试图将我的状态作为字典数组发送到 Redux，但问题是我需要声明一个空字典数组，然后才能通过它发送我的状态。

这是我的App.tsx文件：

import React, { FC, useState } from "react"
import { useSelector, useDispatch } from "react-redux"
import TodoList from "./Components/TodoList"
import NameTodo from "./Components/NameTodo"
import { RootState } from "./todoStore"
import { createTodoCard } from "./todoReducer"

interface TodoListTemplate {
  title: string,
  id: number,
}

const App: FC = () => {

  // Contains all the generated todo-lists
  const [generatedTodoList, setGeneratedTodoList] = useState<any[]>([]);

  const selector = useSelector((state: RootState) => { return state.todo …