标签: redux-middleware

我有一个与 rest api 交互的 redux 中间件。我最近开始使用 async/await 重写一些 fetch 函数。

为了使这对我最有意义，我需要中间件函数本身是一个异步函数，以便我可以在我创建的其他异步函数上使用“await”和 try/catch 块，而不是必须使用 .然后，.catch。

到目前为止，我有这个：

const apiMiddleware = ({
  dispatch,
  getState
}) => next => async action => {
  switch (action.type) {
   //...
   }
  next(action);
};

请注意在“action”之前使用async关键字。到目前为止，这似乎按预期工作，我能够等待来自该中间件的其他异步功能。但是，由于我找不到相关文档，我想知道我所做的是否真的有效。

谢谢

对于我的 React 应用程序，我构建了许多自定义中间件并在applyMiddleware(). 因为我有这么多，redux 存储文件看起来有点拥挤。将它们全部applyMiddleware()传递到函数中或将它们导入到函数内的单独文件中，然后将该函数传递到函数中applyMiddleware()以保持清洁是一种好习惯吗？

// Redux store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducers,
  composeEnhancers(
    applyMiddleware(...xMdl, ...yMdl, ...zMdl, ...nAmountsOfMdl),
  )
);

我想知道是否有办法在创建商店后注入 Redux 商店中间件？

我想要一些类似的东西：

injectMiddleware(store, [middleware1, middleware2]);

以类似的方式，我们可以在创建商店后使用replaceReducer https://redux.js.org/api-reference/store#replaceReducer 动态替换 root reducer 。

我正在尝试使用提供的文档将 redux 项目转换为打字稿：

https://redux.js.org/usage/usage-with-typescript#type-checking-middleware

但是我在使用自定义中间件时遇到了麻烦。这是导致我出错的最小化和提取的代码。

商店.ts：

import { configureStore } from '@reduxjs/toolkit';

import reducer from './customReducer';

import { customMiddleware } from "./customMiddleware";

const store = configureStore({
    reducer: {
        custom: customReducer
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware)

})

export type RootState = ReturnType<typeof store.getState>

export default store

自定义中间件.ts：

import { Middleware } from 'redux';
import { RootState } from './store';

export const customMiddleware = (): Middleware<{}, RootState> => {
    return store => next => action => {
        return next(action);
    }
}

这会导致几条错误消息： …

我有一个中间件，可以在下一个操作运行之前转到刷新令牌，然后在访问令牌过期时运行另一个操作。

但是，如果我一次发出多个请求并且访问令牌已结束，我将尝试获取与请求一样多的刷新令牌。我正在检查状态中的 isLoading 属性以防止这种情况。但是请求之后，isLoading值在reducer中为true，在中间件中好像为false，所以一次又一次的请求。

我在 fetching_refresh_token 操作中发送 refreshTokenPromise，但我从来没有得到 state.refreshTokenPromise，它总是未定义的。

我肯定对国家有问题。

所以这是我的问题，如何访问中间件中不断变化的状态值？

刷新令牌中间件：（此版本多次命中端点）

import { AsyncStorage } from 'react-native';
import { MIN_TOKEN_LIFESPAN } from 'react-native-dotenv';
import moment from 'moment';
import Api from '../lib/api';
import {
  FETCHING_REFRESH_TOKEN,
  FETCHING_REFRESH_TOKEN_SUCCESS,
  FETCHING_REFRESH_TOKEN_FAILURE } from '../actions/constants';

export default function tokenMiddleware({ dispatch, getState }) {
  return next => async (action) => {
    if (typeof action === 'function') {
      const state = getState();
      if (state) {
        const expiresIn = await AsyncStorage.getItem('EXPIRES_IN');
        if (expiresIn && isExpired(JSON.parse(expiresIn))) {
          if (!state.refreshToken.isLoading) …

在我们的Angular应用程序中,我们计划使用Redux,但我们决定使用它来仅管理至少两个组件共享的数据.只使用一个组件的数据将直接获取,而不使用Redux.例如,假设组件必须显示值列表,并且这些值不与任何其他组件共享,那么我们将使用服务获取此列表.但是在获取此数据时,它可能会影响商店中的某些其他状态,例如它可能会调度某些操作,如NETWORK_REQUEST_SENT,NETWORK_REQUEST_COMPLETED,以便微调器/覆盖组件可以更改其显示.

现在问题是代码的哪一部分应该负责调度这些操作.

• 场景1:从服务获取数据的容器组件可以调度这些操作,但我不认为它属于此处.
• 场景2:进行HTTP调用的服务可以调度这些操作,这意味着服务必须订阅HTTP observable并返回其自己的组件可观察对象.
• 场景3:可以在Redux中间件中执行,但是我们必须分派一个用于获取值列表的操作,这意味着值列表必须存储在商店中,这是我们不想要的.
• 方案4:如前所述在这里,我们可以创建一个抽象层,但后来感觉没有必要中间件即可.

我正在开发一个Facebook应用程序,我正在使用两个不同的模块:AdonisJS和react-redux-starter-kit.然后我执行了一个操作来存储在执行回调函数时使用Facebook登录按钮登录的用户:

callback = (r) => {
  const { addLinkedAccount } = this.props

  addLinkedAccount({
    userId: r.userId,
    name: r.name,
    accessToken: r.accessToken,
    email: r.email
  })
}

整个行动档案:

import { CALL_API } from 'redux-api-middleware'

// ------------------------------------
// Constants
// ------------------------------------
export const ADD_LINKED_ACCOUNT = 'linkedAccount:add_linked_account'
export const ADD_LINKED_ACCOUNT_SUCCESS = 'linkedAccount:add_linked_account_success'
export const ADD_LINKED_ACCOUNT_FAIL = 'linkedAccount:add_linked_account_fail'

// ------------------------------------
// Actions
// ------------------------------------
export function addLinkedAccount ({ userId, name, accessToken, email }) {
  return {
    [CALL_API]: {
      endpoint: '/api/linked-accounts',
      method: 'POST',
      headers: …

与世界上的应用程序一样，我的 React 应用程序需要对 API 执行一些 Ajax 调用。

我选择使用 Redux 中间件，以便正确地将 API 获取与我的组件分开。
这个想法是从我的组件中分派REQUEST操作。中间件监听它们并调度SUCCESS或ERROR操作：最后这些由减速器监听。

这里很多人已经问过如何从 Redux 中间件分派操作：这不是我的问题的主题:)

首先，让我向您展示我用来编写的一个简单的减速器：

function currentUserReduxer(state = {}, action = {}) {
  const { currentUser, error } = action.payload;

  switch (action.type) {
    case 'GET_CURRENT_USER_REQUEST':
      return { ...state, isFetching: true, error: null };

    case 'GET_CURRENT_USER_SUCCESS':
      return { ...state, id: currentUser.id, isFetching: false };

    case 'GET_CURRENT_USER_FAILURE':
      return { ...state, isFetching: false, error };

    default:
      return state;
  }
}

以及相应的中间件：

() => …

我们为什么要做这个：

const middleware = store => next => action => { ... }

而不是像这样更简单的东西

const middleware = (store, next, action) => { ... }

Redux 团队以这种方式设计中间件有什么优势吗？如果我们拆分中间件功能，是否可以利用一些功能？

在我自己的应用程序中，我定义了一个simplerMiddleware()可以从第二种形式转换为第一种形式的函数，并且它似乎工作得很好。

function simpleMiddleware(simpleMiddlewareFunction) {
  return store => next => action => simpleMiddlewareFunction(store, next, action);
}

为什么是三个箭头函数？

注意：我不是在问什么是柯里化，或者为什么函数式编程中存在柯里化，或者柯里化有什么一般好处；Redux 设计者选择这个签名而不是更简单的三参数函数有什么具体原因吗？

我希望每个人这个周末都过得很好！

免责声明：我已经研究了一整天，在尝试了很多事情之后，我打开了 20 多个 StackOverflow 链接并阅读了它们，然后才来寻求帮助......

我有这个自定义的 redux 中间件，它的目的是捕获失败的承诺并为每个承诺分派一个操作。

const errorMiddleware: Middleware =
  ({ dispatch }: MiddlewareAPI) =>
  (next: Dispatch) =>
  async (action: AnyAction) => {
    const { meta, payload } = action;
    const { withErrorHandler, defaultErrorCode } = meta;

    const isPromise = getIsPromise(payload);

    if (isPromise && withErrorHandler) {
      return next(action)
        .catch(errorHandler(defaultErrorCode))
        .catch((handledError: ISystemError) =>
          Promise.reject(
            handledError.shouldSkipHandleError
              ? handledError
              : dispatch(addError(handledError))
          )
        );
    }

    return next(action);
  };

我想解决的问题是async (action: AnyAction) => {

我收到一条错误消息说

Argument of type 'AsyncThunkAction<number, number, {}>' …