标签: redux-toolkit

我正在 React 中进行存储，并且 Typescript 有一个问题，说 “composeWithDevTools 期望 1 个参数，但得到 2 个”。 我四处搜索，发现很多人都像我一样编写了代码，所以我找不到问题所在。是否有人可以解释为什么会出现此错误以及如何解决此问题？我真的很感激！

import { applyMiddleware, configureStore } from '@reduxjs/toolkit';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './modules/reducer';
import createSagaMiddleware from '@redux-saga/core';
import rootSaga from './modules/rootSaga';

const create = () => {
  const sagaMiddleware = createSagaMiddleware();
  const store = configureStore(
    reducer, 
    composeWithDevTools(applyMiddleware(sagaMiddleware))
    );

    sagaMiddleware.run(rootSaga);

  return store;
}

export default create;

以及错误消息。

这是我的软件包版本。

"packages": {
    "": {
      "name": "my-books",
      "version": "0.1.0",
      "dependencies": {
        "@reduxjs/toolkit": "^1.9.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": …

我想访问位于商店中的令牌并将其放入标头中以便使用将来的查询，但是 getState() 出现错误。这是代码->

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

export const baseApi = createApi({
    reducerPath: "baseApi",
    tagTypes: ["Todos"],
    baseQuery: fetchBaseQuery({
        baseUrl: 'http://localhost:3000/',
        prepareHeaders: (headers, { getState }) => {
            const token = getState().auth.accessToken;
            if (token) {
                headers.set('Authorization', `Bearer ${token}`)
            }
            return headers;
        },
    }),
    endpoints: () => ({
        
    }),
    [error](https://i.stack.imgur.com/nMjl3.png)
});

Vscode 显示（参数）getState: () => 未知对象的类型为“未知”

尝试使用 RTK 查询进行简单的基本查询，并在使用 定义我的 api 后createApi()，当我尝试解构 api 以获得我的钩子时，Typescript 给出了错误。

然后，我从文档中复制粘贴了口袋妖怪示例代码，即使这样，它也说该钩子不存在。

显然我错过了一些东西。

这是直接从文档中提取的代码，但具有字符串返回类型：

export const pokemonApi = createApi({
    reducerPath: 'pokemonApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
    endpoints: (builder) => ({
      getPokemonByName: builder.query<string, string>({
        query: (name) => `pokemon/${name}`,
      }),
    }),
})
  
export const { useGetPokemonByNameQuery } = pokemonApi;

这useGetPokemonByNameQuery就是显示错误的原因：

Property 'useGetPokemonByNameQuery' does not exist on type 'Api<BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, { getPokemonByName: QueryDefinition<...>; }, "pokemonApi", never, unique symbol>'.

我究竟做错了什么？

在尝试在接下来的 14 中设置 reduxt 工具包时遇到了一些问题，如下所示。我已经按照几个 YouTube 视频和在线文章的确切步骤进行操作。但仍然被困在这里，因为我无法理解似乎是什么问题

当前端的 next 编译它时，我收到此错误

这是 store.ts 文件

我正在尝试使用 redux-toolkit 来存储来自 api 的数据。我尝试过，但收到此错误，提示“对象表示法createSlice.extraReducers已被删除。请改用‘构建器回调’表示法”这是代码片段：

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

export const getAllJobs=createAsyncThunk("jobDetails",async ()=>{
    const data = await fetch(" http://localhost:3031/jobs");
    const result = data.json();
    return result
    
})


export const jobDetails=createSlice({
    name:"jobDetails",
    initialState:{
        jobs:[],
        loading:false,
        error:null,
    },
    extraReducers:{
        [getAllJobs.pending]: (state)=>{
            state.loading=true;
        },
        [getAllJobs.fulfilled]: (state,action)=>{
            state.loading=false;
            state.jobs=action.payload;
        },
        [getAllJobs.rejected]: (state,action)=>{
            state.loading=false;
            state.error=action.payload;
        },
    },
})


export default jobDetails.reducer;

和商店

import {configureStore} from '@reduxjs/toolkit'
import  jobDetails  from '../features/jobSlice'


export const store= configureStore({
    reducer: {
        app: jobDetails
    },
})

我正在尝试将获取的 …

我正在使用 react-router-dom v5.2。

登录后，我希望我的页面重定向到/homefrom /。登录表单位于/。

当我尝试在没有任何异步功能的情况下执行身份验证（即，将用户名和密码与 react 中的硬编码值进行比较）时，一切正常。

但是当我使用 express 和 mongo 执行身份验证时，登录时的重定向停止工作。如果我再次登录，则会发生重定向。受保护的路由仍然有效（如果用户未登录，则重定向到登录页面）。

这是我在 express + mongo ie 中使用 do auth 的问题的一个小演示。异步还原。这没有按预期工作。https://youtu.be/Zxm5GOYymZQ

这是我使用硬编码用户名和密码（均为“测试”）进行身份验证的应用程序链接。这里没有异步。这按预期工作。用户名和密码都是“test”。https://poke-zoo.herokuapp.com/

这是App.js：

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authState = useSelector(selectorAuth)
  // const location = useLocation()
  return (
    <Route
      {...rest}
      render={props => {
        if (authState.isUserLoggedIn) {
          return <Component {...props} />
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location,
                }, …

我有一个 ReactNative 应用程序，我试图从我的中间件列表中删除中间件“serializedStateInvariant”。页面https://redux-toolkit.js.org/api/getDefaultMiddleware缺少一些信息。

他们表示要配置商店：

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk, immutableStateInvariant]
})

但没有说明如何导入thunk，或者immutableStateInvariant。

如何导入它们，以便我可以将我的中间件设置为[thunk, immutableStateInvariant], without serializableStateInvariant？

我正在尝试在我的 redux 应用程序中导入打字稿。我使用 redux 工具包 createSlice 函数，如下所示：

const slice = createSlice({
  name: sliceName,
  initialState,
  reducers: {
    updateMode(state: SliceState, action: PayloadAction<ModePayload>) {
      state = action.payload.mode;
    },
  },
});

当我调度 updateMode 操作时，我收到以下错误：

Error: A case reducer on a non-draftable value must not return undefined

但我的 action.payload 定义良好，并且 redux 工具包是最新的。它与我的代码有关，但我无法弄清楚......

我尝试在 updateMode 中返回状态并且它有效，但我收到 TypeScript 错误：

Type '(state: SliceState, action: { payload: ModePayload; type: string; }) => SliceState' is not assignable to type 'CaseReducer<"SHOW_LIST", { payload: any; type: string; }> | CaseReducerWithPrepare<"SHOW_LIST", PayloadAction<any, string, …

我想在 thunk 中获取存储在状态中的值，在本例中为projectId。我可以在调用操作时访问该值而不将其作为参数传递吗？

interface RepoDetailsState {
      openIssuesCount: number
      error: string | null
    }

const initialState: RepoDetailsState = {
  openIssuesCount: -1,
  error: null,
  projectId: 'someProjectId'

}

const repoDetails = createSlice({
  name: 'repoDetails',
  initialState,
  reducers: {
  // ... reducers ...
  }
})

export const {
  getRepoDetailsSuccess,
  getRepoDetailsFailed
} = repoDetails.actions

export default repoDetails.reducer

export const fetchIssuesCount = (
  org: string,
  repo: string
): AppThunk => async dispatch => {
 //How do I access projectId from state?
}

今天我有一个错误，useSelector当我的 redux 状态改变时，我正在使用的组件不会重新渲染。快速阅读createSlice文档后，我注意到他们正在返回state.something = action.payload，而我没有这样做。

所以在这段代码中：

const personSlice = createSlice({
  name: "person",
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setUser: (state, action) => {
      state = { ...state, ...action.payload };
    },
  },
});

当我设置令牌时，我的应用程序会更新并且运行良好。但是在分派setUser动作之后，我依赖于person状态的组件没有被重新渲染。但是为什么当我设置令牌而不返回时它会起作用？

我把我的代码改成这样：

const personSlice = createSlice({
  name: "person",
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setUser: (state, action) => {
      return state = { ...state, ...action.payload }; …