标签: redux-toolkit

简化示例

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

    type Cake = {
      flavor: string;
      size: 'S' | 'M' | 'L';
    };

const initialState: { all: Cake[]; meta: { currentPage: number } } = {
  all: [],
  meta: {
    currentPage: 0,
  },
};

const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    fetchAll(
      state,
      action: PayloadAction<Cake[], string, { currentPage: number }>,
    ) {
      state.all = action.payload;
      state.meta = action.meta;
    },
  },
});

export default cakeSlice;

我收到这些错误。

Type '
(state: {
    all: …

我有以下切片和函数。如何获取存储在初始状态中的值？

const example = createSlice({
  name: "example",
  initialState: {
   firstName: hello,
   lastName: world
  },
  reducers: {}
 })

export const create = (id) => {
  return async (dispatch) => {
      const currentState = getState()
      console.log(currentState) 
  };
};

我是否必须使用 useSelector 并将值再次传递给函数？理想情况下希望直接从已保存的状态获取数据

我正在用打字稿做一个 redux-toolkit 教程。但我是打字稿初学者。

我不知道这里出了什么问题。请给我你的见解。

这是一条错误消息。: TS2322: 类型“number”不可分配给类型“void |” 状态| 可写草稿'。

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

type State = {
  value: number
}
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => state.value + action.payload; // error line

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment,
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const {increment, decrement, incrementByAmount} = counterSlice.actions;

export default counterSlice.reducer;

代码在这里：

users.slice.ts:

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

const userAPI = {
  async fetchById(userId: string) {
    return { data: { id: userId, name: 'teresa teng' } };
  },
};

export const fetchUserById = createAsyncThunk<User, string>(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId);
    return response.data;
  },
  {
    condition: (userId, { getState }) => {
      const { users } = getState();
      const { fetchStatus } = users[userId];
      if (fetchStatus === 'loading') {
        return false;
      }
    }, …

我正在尝试修改数组orderedList中objmeal的字段数量。这是错误：

类型错误：无法分配给对象“#”的只读属性“数量”

我怎样才能改变这种状态。

请帮忙，请帮忙，请帮忙，请帮忙，请帮忙，请帮忙，请帮忙。请帮忙，请帮忙，请帮忙，请帮忙，请帮忙，请帮忙，请帮忙。

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

const menuList = [
    {
        id: 'm1',
        name: 'Sushi',
        description: 'Finest fish and veggies',
        price: 22.99,
        quantity: 0
    },
    {
        id: 'm2',
        name: 'Schnitzel',
        description: 'A german specialty!',
        price: 16.5,
        quantity: 0
    },
    {
        id: 'm3',
        name: 'Barbecue Burger',
        description: 'American, raw, meaty',
        price: 12.99,
        quantity: 0
    },
    {
        id: 'm4',
        name: 'Green Bowl',
        description: 'Healthy...and green...',
        price: 18.99,
        quantity: 0
    },
];

const initialStateMeals = {
    menuList,
    orderedList: [],
    numberOfOrderedMeals: 0, …

找不到任何关于此的信息来解释为什么它不生成以及如何强制它重新生成这些钩子。

首先，我认为我必须运行该应用程序才能使其正常工作，所以我也这么做了yarn start。

我最终手动将它们添加到底部导出中，它应该根据文档自动生成。我在这里关注这个评论。

挂钩是根据服务定义中端点的名称自动生成的。带有 getPost: builder.query() 的端点字段将生成一个名为 useGetPostQuery 的钩子。

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

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    getMyNewCustomEndpoint: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
  }),
})
// Export hooks for usage in functional components, …

我在 Next.js 应用程序中使用 RTK（redux-toolkit）。我正在尝试在“getInitialProps”内调度 AsyncThunk Action。在搜索时，我发现了一个名为“next-redux-wrapper”的包，它公开了“getInitialProps”内的“store”，但我正在努力弄清楚如何使其与我的项目一起使用。

这是该项目的准系统示例，我目前正在使用带有 2 个减速器的 Typescript。一种减速器使用 AsyncThunk 从 API 获取数据。我已经安装了“next-redux-wrapper”，但我不知道如何实现它，以便所有页面都可以访问“getInitialProps”内的“store”。该包的文档有一个示例，但相当令人困惑。

这是我的 store.ts 的样子......

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
import { counterReducer } from '../features/counter';
import { kanyeReducer } from '../features/kanye';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    kanyeQuote: kanyeReducer,
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string> …

使用这段代码，我没有收到任何错误。

import {combineReducers, configureStore} from '@reduxjs/toolkit';
import {menuReducer as menu} from './menu';
import {cartReducer as cart} from './shoppingCart';
import {optionsReducer as options} from './optionsItem';
import {homeReducer as home} from './home';
import {rewardReducer as reward} from './reward';
import {ordersReducer as orders} from './orders';
import {authReducer as auth} from './auth';
import giftCardReducer from '../store/giftCard';
import paymentMethodReducer from './paymentMethod';
import paymentToken from "./paymentToken";
import qRCode from "./qRCode";
import orderHistory from './orderHistory';
import orderDetail from './orderDetail';
import showCompletedOrder from './showCompletedOrder';
import paymentOptionsSummary from './paymentOptionsSummary'; …

大家好，提前致谢。

首先，我知道天气数据不适合 RTK 查询，因为它总是在变化，在这种情况下我使用 RTK 查询只是出于练习目的。我想在单击按钮时重新获取天气数据，但组件没有更新，但是requestId通过检查控制台，我可以看到单击刷新按钮时确实发生了变化，并且正在检索数据。我正在按照官方文档中的示例进行重新获取：

https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-demand-with-refetchinitiate

我还想知道使用 useLazyQuery 及其trigger函数是否更合适......

https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquery

...但如果是这样，我应该考虑什么才能决定使用 useQuery 还是 useLazyQuery？

    import {
  IonButton,
  IonButtons,
  IonCard,
  IonCol,
  IonContent,
  IonGrid,
  IonHeader,
  IonPage,
  IonRow,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import styles from "./Tab1.module.css";
import { RefreshOutline } from "react-ionicons";
import { Geolocation } from "@capacitor/geolocation";
import { useEffect } from "react";
import { RootState } from "../app/store";
import { useDispatch, useSelector } from "react-redux";
import { useGetCurrentPositionWeatherQuery } from "../services/weather";
import { setQueryCoord } …

redux-toolkit我在、redux-persist和配置方面遇到问题next-redux-wrapper。我尝试使 redux 状态持久化，但它不运行应将状态保存到本地存储的 redux 操作。

我的store.ts文件。

import {
  Action,
  combineReducers,
  configureStore,
  ThunkAction,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createWrapper } from 'next-redux-wrapper';
import taskReducer from './reducers/taskReducer';
import projectReducer from './reducers/projectReducer';
import workplaceReducer from './reducers/workplaceReducer';
import userReducer from './reducers/userReducer';
import trackTaskReducer from './reducers/trackTaskReducer';
import chatRoomReducer from './reducers/chatRoomReducer';
import messageReducer from './reducers/messageReducer';

const rootReducer = combineReducers({
  taskReducer,
  projectReducer,
  workplaceReducer,
  userReducer,
  trackTaskReducer,
  chatRoomReducer,
  messageReducer,
});

const …