从redux-saga调用组合重选选择器

Question

我试图从redux-saga调用组合选择器。这个想法是我有两个下降。第一个下拉列表中的选项将在第二个下拉列表中过滤相应的值，即我的组合选择器将过滤掉一些不相关的值，因此它们不会在第二个下拉列表中显示：

1）我有两个选择器，firstSelector和secondSelector

// firstSelector returns {"Cat":["black","white"],"Dog":["grey"]}
const firstSelector= () =>
  createSelector(selectPage, substate => substate.firstDropDown);

// secondSelector returns ["black","grey"]
const secondSelector= () =>
  createSelector(selectPage, substate => substate.secondDropDown);

2）我在组合选择器中组合它们（应返回["black", "grey"]，即“白色”被过滤掉）

const filterBySelection = (firstSelector, secondSelector) =>
  createSelector(
    [
      firstSelector, 
      secondSelector, 
    ],
    (first, second) => {
      const filteredValues = Object.keys(first).reduce(
        (r, k) => r.concat(first[k]),
        [],
      );
      return second.filter(val => filteredValues.indexOf(val) >= 0);
    },
  );

3）但是如何在filterBySelection中调用redux-saga？我试过了：

const filteredValues = yield select(
  filterBySelection,
  firstSelector,
  secondSelector,
);

和

const filteredValues = yield select(
  filterBySelection(firstSelector, secondSelector)()
);

和

const filteredValues = yield select(
  filterBySelection(firstSelector, secondSelector)
);

但这些方法不起作用。

虽然，我可以打电话给firstSelector或secondSelector，即作品：

const firstData= yield select(firstSelector());

有人可以说我可以简单地在redux-saga中执行以下操作：

const first = yield select(firstSelector());
const second = yield select(secondSelector());
const filtered = Object.keys(first).reduce(
  (r, k) => r.concat(first[k]),
  [],
);
const secondFiltered = second.filter(
  val => first.indexOf(val) >= 0,
);

但那将not memoize和想法是memoize。

那么有可能在redux-saga中使用memoized选择器吗？

最好的祝福

Answer 1

你似乎错过了调用函数来返回选择器。那么，要么：

一个）

const filterBySelection = (firstSelector, secondSelector) =>
  createSelector(
    [
       firstSelector(), // <- parentheses 
       secondSelector(), // <- parentheses 
     ], ... )

然后：

const filteredValues = yield select(
  filterBySelection(firstSelector, secondSelector)
);

b）正确传递选择器

const filteredValues = yield select(
  filterBySelection(firstSelector(), secondSelector())
);

c）定义没有功能的firstSelector和secondSelector（也许是最真实的方式）：

const firstSelector = 
  createSelector(selectPage, substate => substate.firstDropDown);

const secondSelector = 
  createSelector(selectPage, substate => substate.secondDropDown);

然后

const filteredValues = yield select(
  filterBySelection(firstSelector, secondSelector)
);

希望能帮助到你。

Answer 2

我会选择这样的东西

  createSelector(
    firstSelector, 
    secondSelector, 
    (first, second) => {
      const filteredValues = Object.keys(first).reduce(
        (r, k) => r.concat(first[k]),
        [],
      );
      return second.filter(val => filteredValues.indexOf(val) >= 0);
    },
  );```