Question

我正在使用的应用程序是使用react-router-redux。目前我处理链接点击的方式是：我将拥有以下内容：

clickEvent = (e) => {
  e.preventDefault()
  this.props.dispatch(push(`/products/${product.id}`))
}

在许多不同的组件中重复自己。同样适用于其他链接。

最近我们决定对网址结构进行更改，突然我发现自己正在搜索所有dispatch(push())并逐一修复它们。所以现在我正试图找到一种方法将这些网址存储在一个地方。

我尝试的显而易见的方法是使用routing_utils.js：

import React        from "react"
import { push }  from "react-router-redux"

// Store all the possible urls here

export function visitHome(dispatch) {
  dispatch(push('/'))
}

export function visitProductShow(dispatch, productId) {
  dispatch(push(`/products/${productId}`))
}

export function visitProductReviews(dispatch, productId) {
  dispatch(push(`/products/${productId}`/reviews))
}

然后像这样使用它：

import { visitProductShow } from "../../routing_utils"

// ... inside a component:
  clickEvent = (e) => {
    const { dispatch, product } = this.props
    visitProductShow(dispatch, product.id)
  }

或者您知道，只需存储网址而不传递dispatch，然后按照这样的方式调用它们：dispatch(push(productShowLink(id)))，无论哪种方式都感觉不对。

这可以通过redux操作来处理吗？如果是这样，我该怎么办呢？我正在寻找一个更好的方法来处理这个问题，谢谢你的时间。

我该如何组织我的React Dispatch URL

0 个答案: