标签: redux-toolkit

我正在深入研究 React with Redux 来重写我们的产品。\n使用 Redux-Toolkit https://redux-toolkit.js.org/清除了围绕 Redux 的很多迷雾。\n然后我发现 React-Router 做了状态管理混乱，在 redux-first-router https://github.com/faceyspacey/redux-first-router中找到了解决方案。

现在我想把这些优秀的库结合起来。但我认为我在配置中做错了什么。\n这是代码。从https://codesandbox.io/s/m76zjj924j的沙箱示例开始，我将 configureStore.js 文件更改为（为简单起见，我省略了用户减速器的代码）

import { connectRoutes } from \'redux-first-router\';\nimport { configureStore, getDefaultMiddleware } from \'@reduxjs/toolkit\'\nimport { routePaths } from \'../routes\';\n\nconst { reducer: location } = connectRoutes(routePaths);\n\nconst {\n    middleware: routerMiddleware,\n    enhancer: routerEnhancer,\n    initialDispatch\n  } = connectRoutes(routePaths, { initialDispatch: false });\n\nexport default function configureRouteStore() {\n  const store = configureStore({\n    reducer: {\n\n      location: location\n    },\n    middleware: [...getDefaultMiddleware(), routerMiddleware],\n    enhancers: (defaultEnhancers) => [routerEnhancer, ...defaultEnhancers]\n  })\n …

我试图同时注销并清除商店，因此单击我会发送以下内容：

dispatch({type: PURGE, key: 'root', result: () => { } });

Redux persist 捕获它，并报告清除存储。伟大的。在另一个减速器中，我捕获该调度，并删除我的访问令牌，如下所示：

import { PURGE } from 'redux-persist/es/constants';

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAccessToken(state: AuthState, action: PayloadAction<Auth>): void {
      state.accessToken = action.payload.accessToken;
      state.expiresIn = action.payload.expiresIn;
    },
  },
  extraReducers: {
    [PURGE]: (state: AuthState, action: string): void => {
      state.accessToken = initialState.accessToken;
      state.expiresIn = initialState.expiresIn;
    },
  },
});

PURGE 减速器实际上被调用，并修改状态，但仍然没有重新渲染发生。所以 redux 一定不能接受它。但根据文档，Redux 工具包使用 Proxy 对象作为状态，并进行比较以查看它是否被修改。

我尝试过的事情：

state = initialState;

和

state = { ...initialState };

没用。商店可以工作，可以保存数据，其他操作也可以工作。我该如何继续？ …

createAsyncThunk从存储在集合中的 Google Firebase 获取笔记数据时，我使用Redux Toolkit 中的 APInotes

在notebookSlice.js我定义了函数 thunk 和 slice

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const firebase = require('firebase');

export const fetchNotes = createAsyncThunk(
  'users/fetchNotes',
  async () => {

    firebase.firestore().collection('notes').get()
      .then((snapshot) => {
        var data = [];
        snapshot.forEach((doc) => {
          data.push({
            title: doc.data().title,
            body: doc.data().body,
            id: doc.id
          })
        });


        console.log(data); // not null
        return data;
      })
      .catch((err) => {
        console.log(err)
      });



  }
)


export const notebookSlice = createSlice({
  name: 'notebook',
  initialState: {
    selectedNoteIndex: …

我正在尝试在具有复合键的实体中使用 Redux-Toolkit 的createEntityAdapter 。例如，我的领土实体有一个类型（市、州、生物群落等）和地理编码号。{type, geocode} 对是该实体的复合键。

我希望能够使用selectById和其他选择器。我的第一个想法是创建一个连接类型“;”的id字段。和地理编码，但我确信有更好的方法。

import { createEntityAdapter } from '@reduxjs/toolkit'

const adapter = createEntityAdapter({
    // selectId: (item) => ???,
})

const APIresponse = {
    data: [
        { type: 'state', geocode: 1, value: 123},
        { type: 'state', geocode: 2, value: 66},
        { type: 'municipality', geocode: 1, value: 77},
        { type: 'municipality', geocode: 2, value: 88},
        { type: 'municipality', geocode: 3, value: 99}
    ]
}

我有一个由大量相似条目组成的 redux（子）状态。

export type PartnerCalculatorStateShape = {
    m16_19:number;
    m20_24:number;
    m25_34:number;
    m35_44:number;
    m45_64:number;
    m65_plus:number;
    f16_19:number;
    f20_24:number;
    f25_34:number;
    f35_44:number;
    f45_64:number;
    f65_plus:number;

};

我正在使用Redux Toolkit，所以我的reducer是这种形式（注意Redux Toolkit使用不可变的更新逻辑，所以我可以直接分配修改状态）

type PartnerCalculatorPayload = {
  key:string;
  value:number;
}

    export const partnerCalculatorSlice = createSlice({
      name: 'PartnerCalculator',
      initialState,
      reducers: {
        partnerCalculatorValueReceived(state, action: PayloadAction<PartnerCalculatorPayload>) {
          state[action.payload.key] = action.payload.value;
        }
      }
    });

我对如何使用有点困惑useSelector。我想要做的是在我的 Redux 文件中有一个选择器函数，像这样

export const selectorFunction = (state,key) => state[key]

例如，key会在哪里。m20_24然后我会在我的 React 组件中使用该选择器函数

const myVar = useSelector(selectorFunction)

但是我如何传递密钥呢？

官方hooks 文档建议使用闭包来传递附加变量 …

如何使用 RTK 将整个数组分配给我的 intialState 对象？

做state = payload或state = [...state, ...payload]不更新任何东西。

例子：

const slice = createSlice({
  name: 'usersLikedPosts',
  initialState: [],
  reducers: {
    getUsersLikedPosts: (state, { payload }) => {
      if (payload.length > 0) {
        state = payload
      }
    },
  },
})

有效载荷如下所示：

[
  0: {
    uid: '1',
    title: 'testpost'
  }
]

更新

这样做有效，但我不知道这是否是正确的方法。任何人都可以评论吗？

payload.forEach((item) => state.push(item))

我似乎无法从 我对 Typescript 相当陌生的人那里收到PromisefromcreateAsyncThunk函数Redux-toolkit，我正在努力弄清楚为什么它会给我 Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>'错误，即使如果我删除打字，承诺确实会返回。这是我的createAsyncThunkfn

export const getStudentByIdRequest = createAsyncThunk<Student, number>(
  'student/getStudentByIdRequest',
  async (id, { rejectWithValue }) => {
    try {
      const { data } = await instance.get(`student/${id}/`)
      return data
    } catch (err) {
      let error: AxiosError = err
      if (error) {
        return rejectWithValue({
          message: `Error. Error code ${error.response?.status}`,
        })
      }
      throw err
    }
  }
)

这就是我从React组件中发送它的方式

dispatch(getStudentByIdRequest(userId)).then((res) => console.log(res)) …

伙计们

就像在主题中一样，有没有一种解决方案可以等到调度操作完成然后再调度另一个？

我需要重击吗？

dispatch(someAction());

什么时候someAction完成发货anotherAction()

dispatch(anotherAction());

我有一个产品组件，它向“/api/products”发出 GET 请求。在后端的路由处理函数中，我抛出一个错误并向客户端发送一条自定义错误消息（“未授权”）。

在客户端，我想显示从服务器发送的自定义错误消息。但是，当我对操作对象进行 console.log 时，错误消息显示：“请求失败，状态代码为 500”。

如何访问从服务器发回的错误消息？

我对 createAsyncThunk 中的错误处理进行了一些研究。根据文档，我可以使用rejectWithValue处理错误。但我不知道如何在我的情况下实现它。

代码片段如下：

产品Sli​​ce.js

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

const initialState = {
  status: "idle",
  products: [],
  error: null,
};

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts",
  async () => {
    const { data } = await axios.get("/api/products");
    return data;
  }
);

export const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {},
  extraReducers: {
    [fetchProducts.fulfilled]: (state, action) => {
      state.status = "succeeded";
      state.products = …

如何使用 Redux Toolkit RTK Query 将查询参数传递给 api？

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

const baseUrl = 'xxxxxxx';

export const postsApi = createApi({
  reducerPath: 'posts',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getPostsByYear: builder.query({
      query: (start, end) => { // Why is 'end' always undefined???
        return {
          url: 'posts/',
          params: { start, end },
        };
      },
    }),
    getPosts: builder.query({
      query: () => 'posts/',
    }),

    getPostByID: builder.query({
      query: (name) => `posts/${name}`,
    }),
  }),
});

export const { useGetPostsQuery, useGetPostsByYearQuery, useGetPostByIDQuery …