标签: redux-toolkit

我正在阅读createAsyncThunk文档，并对流程感到有点困惑。这是来自文档：

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

// First, create the thunk
const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

// Then, handle actions in your reducers:
const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: {
    // Add reducers for additional …

当fetchUserById()创建时，其输出响应被定义。

const fetchUserById = createAsyncThunk<{user: UserInterface, id: number}, number>(
  'users/fetchByIdStatus',
  async (userId) => {
    const response = await userAPI.fetchById(userId)
    return {user: response.data, id: userId}
  }
);

const userSlice = createSlice({
  name: "users",
  initialState: [],
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.pending, (state, { payload }) => {
      // how I configured custom value for this payload?
      // I need to send the user id.
    });
    builder.addCase(fetchUserById.fulfilled, (state, {payload}) => {
      /**
       * @var {UserInterface} user
       * @var {number} …

有没有办法将createAsyncThunk与 Firebase 侦听器一起使用，例如firestore.collection.onSnapshot？

它可能不起作用，因为 onSnapshot 的工作方式（它是一个侦听器，每次 firestore 更新时都会接收数据并触发回调，并返回一个取消订阅侦听器的函数）。我尝试实现 createAsyncThunk 但无法弄清楚。

这是我当前的 thunk 实现，它确实有效：

const listenerUnsubscribeList = [];
export function fetchProjects() {
  return dispatch => {
    dispatch(fetchProjectsPending());
    const unsubscribe = firestore
      .collection('projects')
      .onSnapshot(
        snapshot => { dispatch(fetchProjectsFulfilled(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })))) },
        error => { dispatch(fetchProjectsError(error)) },
      );
    listenerUnsubscribeList.push(unsubscribe);
  }
}

这是我对 createAsyncThunk 的尝试，但不起作用。我得到了database/fetchProjects/pending，database/fetchProjects/fulfilled但有效负载是undefined

const listenerUnsubscribeList = [];
export const fetchProjects = createAsyncThunk(
  'database/fetchProjects',
  async (_, thunkAPI) => {
    const …

每当我在 Redux 存储中存储不可序列化的值时，我都会收到以下警告：

在下面的示例中，我存储了Firestore.TimestampRedux 状态。它也发生在Date物体上。

在状态中检测到不可序列化的值，路径为：blogPost.createdAt。值：t {秒：1583488258，纳秒：805000000}

看一下处理此操作类型的减速器：LOAD_BLOGPOST_SUCCESS。（参见https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serialized-items-in-my-store-state）

这就是医生的说法：

https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializing-items-in-my-store-state

我可以将函数、承诺或其他不可序列化的项目放入我的存储状态中吗？

强烈建议您只将普通的可序列化对象、数组和基元放入存储中。从技术上讲，可以将不可序列化的项目插入到存储中，但这样做可能会破坏存储内容的持久性和重新水化的能力，并且会干扰时间旅行调试。

如果您对持久性和时间旅行调试等可能无法按预期工作的事情感到满意，那么完全欢迎您将不可序列化的项目放入 Redux 存储中。最终，这是您的应用程序，如何实现它取决于您。与 Redux 的许多其他事情一样，只要确保您了解其中涉及的权衡即可。

我从上面的文档摘录中不太明白。我认为这有点模糊。有人能更详细地解释一下，通过向 Redux 状态添加不可序列化的数据，我们到底可能/将会损失什么吗？

不同数据类型的结果是否不同？例如： a Promise、 afunction (ex: a React component)和 aDate会导致不同的问题吗？肯定会带来问题吗？或者它是可能发生或可能不会发生的事情吗？

保存和补充商店内容的能力意味着什么？这是否意味着它可能会破坏我的应用程序的代码，或者我们只讨论开发工具调试？

更新

刚刚从 Redux Toolkit 中找到了另一篇文档：使用不可序列化数据。

处理不可序列化的数据

Redux 的核心使用原则之一是不应将不可序列化的值放入状态或操作中。

然而，像大多数规则一样，也有例外。有时您可能必须处理需要接受不可序列化数据的操作。应该很少这样做，并且仅在必要时才这样做，并且这些不可序列化的有效负载不应该通过减速器进入您的应用程序状态。

可序列化开发检查中间件会在检测到操作或状态中的不可序列化值时自动发出警告。我们鼓励您保持此中间件处于活动状态，以帮助避免意外犯错误。但是，如果您确实需要关闭这些警告，则可以通过将其配置为忽略特定操作类型或操作和状态中的字段来自定义中间件：

看来本节教您如何忽略在操作中使用不可序列化值的警告，但它也说它不应该进入状态，对吧？

我正在createSlice与 一起使用useReducer。

我希望能正确输入调度，即React.Dispatch<ReducerActions>。

如何从中提取操作类型createSlice？

以下内容不起作用，它解决了AnyAction...我想说这是可以理解的，因为所有操作都会通过所有减速器。

Dispatch<Parameters<typeof slice["reducer"]>[1]>

这是我的登录操作的样子并且工作正常：

export const login = createAsyncThunk(
'auth/login',
async (data, thunkAPI) => {
    const response = await API.login(data)

    //Store user data in local storage
    Storage.save('user', response.data)

    // Add token to HTTP headers
    API.setToken(response.data.key)

    return response.data
})

现在我需要执行注销功能，但是当使用“createSlice()”时，我无法选择添加副作用，因为它直接进入减速器（Redux 文档说我们不应该向减速器添加任何副作用）

// Slice
const authSlice = createSlice({
    name: 'auth',

    initialState: {
        user: null
    },

    reducers: {
        // Logout
        logout: (state, action) => {
            state.user = null
        },

    },
    extraReducers: {
        [login.fulfilled]: (state, action)=>{
            state.user = action.payload
        },
    }
})

所以我想我可以使用 createAsyncThunk 函数在它到达减速器之前执行副作用：

export const …

我在将extraReducer添加到 createSlice时收到上述错误。

这是一个反应本机应用程序

这是我的代码：

    export const login = createAsyncThunk(
      'loginAuth/login',
      async ({username, password}) => {
        try {
          const res = await api.post('SomeApi', {
            username,
            password,
          });
         
          return res.data;
        } catch (e) {
          return console.error(e.message);
        }
      },
    );

    const loginSlice = createSlice({
      name: 'loginAuth',
      initialState: {
        loginStatus: false,
        isLoading: false,
        error: '',
      },
      reducers: {
        //Yet to be filled
      },
      extraReducers: {
        [login.pending]: (state) => {
          state.isLoading = true;
        },
        [login.fulfilled]: (state, action) => {
          state.isLoading = false;
        }, …

我有一个基于 redux-toolkit 构建的简单应用程序。我正在调度 createProduct 操作，该操作运行良好。我想在 createProduct 操作后导航到 /products/ 页面表单 /products/new 页面。我如何使用导航（react-router-dom）来做到这一点。

我尝试了这个内部动作但失败了

 [createProduct.fulfilled]: (state, { payload }) => {
      toast.success('Product Created Successfully!');
      const navigate = useNavigate()
      navigate('/products')
      return {
        ...state,
        loading: false,
        products: state.products ? [...state.products, payload.product] : [payload.product]
      };
    },

我也尝试将导航传递给有效负载，但遇到了此错误：

 You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.

我正在像这样调度 createProduct

 const handleSubmit …

我正在使用 RTK 查询来处理我的请求。但我在取消请求时遇到问题。

场景是这样的，我有一个模式来显示一个表单来添加待办事项，但是，当用户想要关闭模式时，如果请求尚未挂起，则应该取消该请求。

const [addTodo, { isLoading }] = useAddTodoMutation();

const onSubmit = async (values: ToDo) => {
     try {
      await addTodo(values).unwrap();
      console.log('Successful')
    } catch (error) {
      console.log('failed')
    }
  };

我知道有一个abort取消突变addTodo(values).abort();，我们可以在useEffect清理中使用它useRef。

是否可以编写通用方法或自定义挂钩来包装所有突变并在卸载组件时处理取消请求？

我正在尝试使用 RTK 查询通过异步函数设置 contactSlice.ts 的初始状态。

我已阅读文档并在线搜索，但没有找到解决此问题的合适解决方案。

联系人API.ts：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { Contact } from '../models/contact.model';

export const contactsApi = createApi({
    reducerPath: "contactsApi",
    baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3006/" }),
    tagTypes: ['Contact'],
    endpoints: (builder) => ({
        contacts: builder.query<Contact[], void>({
            query: () => '/contacts',
            providesTags: ['Contact']
        }),
        contact: builder.query<Contact, string>({
            query: (id) => `/contacts/${ id }`,
            providesTags: ['Contact']
        }),
        addContact: builder.mutation<{}, Contact>({
            query: contact => ({
                url: '/contacts',
                method: 'POST',
                body: contact    
            }),
            invalidatesTags: ['Contact']
        }),
        updateContact: builder.mutation<void, Contact>({ …