Question

假设我的react-redux应用程序中有一个tree，而tree属于myReducer。在很多情况下，我需要将这棵树弄平，所以我有一个选择器：

const getTree = state => state.myReducer.tree;

export const getFlatNodes = createSelector(
    [getTree],
    (tree) => flattenTree(tree)
);

现在我需要在一个动作中访问扁平化的树

import { getFlatNodes } from 'path/to/selectors';

function myReducer(state = defaultState, action) {
    switch (action.type) {
       case SOME_ACTION:
           const flattenedTree = getFlatNodes(state);
           return {
               ...state,
               smth: getSmthFromFlattenedTree(flattenedTree)
           };
    }
}

由于reducer中的state只是应用程序状态的一部分，因此该代码无法按预期工作。我想到的一个简单的解决方法是包装state以使传递的参数兼容：

import { getFlatNodes as _getFlatNodes } from 'path/to/selectors';
const getFlatNodes = myReducer => _getFlatNodes({ myReducer });

该代码有效，尽管看起来很hacky，但我不确定它是否不会引起任何问题。

有人知道为什么为什么以及如何可以做得更好，或者我的方法已经足够好吗？

Answer 1

也许您在行动中做到了

const someAction = () => (dispatch, getState) => ({
  type: 'SOME_ACTION',
  payload: getFlatNodes(getState())
  // payload: getSmthFromFlattenedTree(getFlatNodes(getState()))
});

然后在减速器中

function myReducer(state = defaultState, action) {
    switch (action.type) {
       case SOME_ACTION:
           return {
               ...state,
               smth: getSmthFromFlattenedTree(action.payload)
           };
    }
}

在精简程序中使用重选选择器

1 个答案: