Question

我正在尝试使用专用的选择器覆盖我的所有应用程序状态。我的应用程序状态的每个部分都由它们自己的选择器处理。

问题是，有时我想在DRY和KISS（分解）中从父级（处理更大切片的那些）中访问那些“切片选择器”，简单）方式。

我尝试导入较小的选择器以将所需的状态片转发给他们。

例如，一个在商店中存储水果和玩具的应用程序：

const state = {
  fruits: [
    {
      type: 'banana',
      quantity: 8
    },
    {
      type: 'strawberry',
      quantity: 42
    }
  ],
  toys: [
    {
      name: 'Puzzle',
      size: '12cm'
    }
  ]
}

我有一个选择器来检索水果，该水果需要type中的state.fruits过滤，是状态的必要切片：

// fruitSelectors.js
export const getFilteredFruit = (fruits, type) =>
    fruits.filter(fruit => fruit.type === type)

我想从状态本身（更大的切片）中使用此选择器，同时抽象出较小选择器的存在。

例如：

// stateSelectors.js
import { getFilteredFruit as getFilteredFruitChild }
    from './fruitSelectors.js'

const getFruits = state => state.fruits

export const getFilteredFruit = (state, type) =>
    getFilteredFruitChild(getFruits(state), type)

此处的目的是重用选择器，以将功能提升到状态的任何部分，而无需为每个深度复制代码。

但是我发现为每个现有功能创建一个import alias有点冗长。

是否有更简单的解决方案来实现这一目标或现有的替代方案？

Answer 1

在进一步阅读lenses之后，评论建议这样做。

我终于找到了一种解决方案，它可能不及镜头那么强大，但可以解决我的问题，并且简单得多。

代替：

// stateSelectors.js
import { getFilteredFruit as getFilteredFruitChild }
    from './fruitSelectors.js'

const getFruits = state => state.fruits

export const getFilteredFruit = (state, type) =>
    getFilteredFruitChild(getFruits(state), type)

我们可以修改导入并获得如下解决方法：

// stateSelectors.js
import * as fromFruits from './fruitSelectors.js'

const getFruits = state => state.fruits

export const getFilteredFruit = (state, type) =>
    fromFruits.getFilteredFruit(getFruits(state), type)

我从Dan Abramov的课程"Building React Applications with Idiomatic Redux"中找到了这一点，更确切地说，是在名为"Redux: Colocating Selectors with Reducers"的课程中发现的

将参数转发到纯函数的合成和简单方法？

是否有更简单的解决方案来实现这一目标或现有的替代方案？

1 个答案: