将道具传递给选择器以根据该道具进行过滤

Question

我需要将道具传递给选择器，以便我可以从选择器中获取点击项目的内容。但是我无法通过道具。我尝试过这种方式但没有成功

const mapStateToProps = createStructuredSelector({
  features: selectFeatures(),
  getFeatureToEditById: selectFeatureToEditById(),
});

handleFeatureEdit = (event, feature) => {
  event.preventDefault();
  console.log("feature handle", feature);
  const dialog = (
    <FeatureEditDialog
      feature={feature}
      featureToEdit={selectFeatureToEditById(feature)}
      onClose={() => this.props.hideDialog(null)}
    />
  );
  this.props.showDialog(dialog);
};

selectors.js

const selectFeatureState = state => state.get("featureReducer");

const selectFeatureById = (_, props) => {
  console.log("props", _, props); #if i get the id of feature here
  # i could then filter based on that id from below selector and show 
  # the result in FeatureEditDialog component 
};

const selectFeatureToEditById = () =>
  createSelector(
    selectFeatureState,
    selectFeatureById,
    (features, featureId) => {
      console.log("features", features, featureId);
    }
  );

这是完整代码的要点

https://gist.github.com/MilanRgm/80fe18e3f25993a27dfd0bbd0ede3c20

Answer 1

只需将 state 和 props 从 mapStateToProps 传递给选择器即可。

如果您直接将选择器用作 mapStateToProps 函数，它将收到与 mapState 相同的参数：state 和 ownProps（在连接的组件上设置的道具）。

一个简单的例子：

// simple selector
export const getSomethingFromState = (state, { id }) => state.stuff[id]
// reselect selector
export const getStuff = createSelector(
  getSomethingFromState,
  (stuff) => stuff
)

// use it as mapDispatchToProps
const mapDispatchToProps = getSomethingFromState

const MyContainer = connect(mapDispatchToProps)(MyComponent)

// and set id as an own prop in the container when rendering
<MyContainer id='foo' />

但是你正在做一些奇怪的事情，比如映射一个选择器以便以后重用它。它不会那样工作，至少它不打算那样使用。

您使用选择器来检索您的状态切片并将其作为道具传递给您的 connected 组件。每当状态发生变化时，您的选择器将重新运行（由于重新选择而进行了一些缓存）。如果组件实际从 Redux 检索的内容确实发生了变化，它将重新渲染。

所以你的 FeatureEditDialog 组件也应该连接起来，并且应该能够从 Redux 状态中检索它需要的任何东西，只需在它自己的中使用道具（哪个功能，哪个 ID 等等） connect 打电话。

this.props.showDialog(dialog); 也是一个很大的代码味道。 ;)

将道具传递给选择器以根据该道具进行过滤

pass props to selectors to filter based on that props

javascript

reactjs

redux

reselect