将构造参数传递给 redux 中间件答案

【问题标题】：Passing construction parameters to redux middleware将构造参数传递给 redux 中间件
【发布时间】：2016-08-15 09:44:43
【问题描述】：

我很好奇是否有一种方法可以将参数传递给中间件而不从状态中检索它。我想要做的是传递一个我们正在使用的通用函数来确定用户是否经过身份验证。因此，我不想从将成为代码重复的状态中检索身份验证信息，而是想将 isAuthenticated 函数传递给中间件。

我不认为这是在 applyMiddleware 框架中本地实现的，但也许有人可以解决这种情况。

【问题讨论】：

标签： reactjs redux middleware

【解决方案1】：

好的，正确的做法是使用包装器函数来包装实际的中间件函数

export const middlewareFunction = (store) => (next) => (action) => {
    do some stuff with something...
}

如果这是您实际的中间件功能，那么您应该将中间件应用为

applyMiddleware(middlewareFunction);

传递参数你应该做的是实现一个类似的函数

export const middlewareWrapper = (args) => {
    do some stuff with your args 
    return (state) => (next) => (action) => {
        do more stuff with your args and actions
    }
}

使用此语法，您可以将中间件应用为：

applyMiddleware(middlewareWrapper(args));

【讨论】：

【解决方案2】：

由于传递给中间件的动作不必是纯的，因此您可以将函数作为动作的一部分传递。由于中间件可以访问存储，并且对状态使用store.getState()，我们可以将方法应用到状态，并得到计算结果。

在real world example of redux的api中间件中可以看到endpoint可以是一个函数，实际的端点可以从状态中计算出来（见星号cmets之间的代码）：

export default store => next => action => {
  const callAPI = action[CALL_API]
  if (typeof callAPI === 'undefined') {
    return next(action)
  }

  let { endpoint } = callAPI
  const { schema, types } = callAPI

 /***************************************************************************/    
  /** if the endpoint is a function compute the actual endpoint from state ***/
  if (typeof endpoint === 'function') {
    endpoint = endpoint(store.getState())
  }
  /***************************************************************************/

  if (typeof endpoint !== 'string') {
    throw new Error('Specify a string endpoint URL.')
  }
  if (!schema) {
    throw new Error('Specify one of the exported Schemas.')
  }
  if (!Array.isArray(types) || types.length !== 3) {
    throw new Error('Expected an array of three action types.')
  }
  if (!types.every(type => typeof type === 'string')) {
    throw new Error('Expected action types to be strings.')
  }

  function actionWith(data) {
    const finalAction = Object.assign({}, action, data)
    delete finalAction[CALL_API]
    return finalAction
  }

  const [ requestType, successType, failureType ] = types
  next(actionWith({ type: requestType }))

  return callApi(endpoint, schema).then(
    response => next(actionWith({
      response,
      type: successType
    })),
    error => next(actionWith({
      type: failureType,
      error: error.message || 'Something bad happened'
    }))
  )
}

【讨论】：

【解决方案3】：

我相信正确的做法是再次咖喱。

使用中间件的文件

import myMiddleWare from '/myMiddleWare.js'
import { applyMiddleware } from 'redux'

args = // whatever arguments you want    
applyMiddleware(myMiddleWare(args))

myMiddleWare.js

export default (args) => ({getState, dispatch}) => (next) => (action) => (
  // Use args do your hearts content
)

【讨论】：