Question

我有一个使用react和redux开发的组件。现在，我想使用recompose，我不了解在redux中使用它的有组织方式。用有组织的方式，我的意思是说我以前曾经有两个函数，例如dot_data = tree.export_graphviz(clf, feature_names=columns[1:], out_file=None, filled=True, rounded=True) graph = pydotplus.graph_from_dot_data(dot_data) colors = ('green', 'red') edges = collections.defaultdict(list) for edge in graph.get_edge_list(): edges[edge.get_source()].append(int(edge.get_destination())) for edge in edges: edges[edge].sort() for i in range(2): dest = graph.get_node(str(edges[edge][i]))[0] dest.set_fillcolor(colors[i]) graph.write_png('tree.png')和mapStateToProps，它们被包裹在mapDispatchToProps中，这使代码在我看来看起来更具可读性和简洁性。我的问题是，我如何做与redux部分相同的操作？在搜索时找不到我，所以我不确定是否有办法，有人可以共享它来帮助我吗？

这是我的代码

connect HOC

对于handleChange和handleSubmit我可以使用withHandler和withState来做，但是对于mapStateToProps和mapDispatchToProps我不熟悉。

Answer 1

直接回答您的问题：

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  withStateHandlers,
  withHandler,
)(Login);

奖金！

使用mapDispatchToProps时不需要单独的recompose。我们喜欢对所有处理程序（包括Redux派发）使用Recompose的withHandlers。

看起来像这样。

import React from 'react';
import { connect } from 'react-redux';
import { signUpUser, loginUser } from './someActionsFile';

const LandingScreen = props => (
  <ButtonContainer>
    <Button title="Sign Up" onPress={props.dispatchSignUpUser} />
    <Button title="Log In" onPress={props.dispatchLoginUser} />
    <Button title="Say Hi!!" onPress={props.sayHi} />
  </ButtonContainer>
);

const mapStateToProps = state => ({
   loginData: state.loginData,
});

const myHandlers = withHandlers({
  dispatchSignUpUser: ({ dispatch }) => () => {
    dispatch(signUpUser());
  },
  dispatchLoginUser: ({ dispatch }) => () => {
    dispatch(loginUser());
  },
  sayHi: () => () => {
    console.log('Hi!!');
  }
});

export default compose(
  connect(mapStateToProps), // Once connect() is composed `dispatch` is prop.
  myHandlers
)(LandingScreen);

Answer 2

对于mapStateToProps：

您可以使用reselect将选择器逻辑移至另一个文件，然后在各个组件之间共享选择器。

对于mapDispatchToProps：

您可以使用redux-thunk或redux-saga将异步逻辑移到单独的文件中。

在redux中使用recompose

2 个答案:

对于mapStateToProps：

对于mapDispatchToProps：