将 React-Redux 添加到辅助函数

Question

我的 React 应用程序中有两个组件使用了一个辅助函数。这个辅助函数会调度一组 Redux 操作。如何将 React-Redux 连接到此辅助函数，以便它可以分派操作？

我的帮手是这样的：

export default const helper = () => {
   //dispatch some actions
   // I would like to do something similar to  this: this.props.dispatch()
   //do something else(produce some JSX)
}

我的组件如下所示：

 import helper from './helper.js';

 export default class Example extends React.Component {
   return (
      {helper()}
   );
 }

我的组件 1 在组件内部定义助手时看起来像这样：

 import { setTime } from '../actions/setTime.js';

 class Example1 extends React.Component {
   helper() {
     //actions are synchronous
     this.props.setTime('10:00PM');

     return (<h1>hello</h1>);
   }

   render() {
     return (
      <h1>something</h1>
      {helper()}
     );
   }
 }

 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

 export default connect(null, mapDispatchToProps)(Example1);

我的组件 2 在组件内部定义助手时看起来像这样：

 import { setTime } from '../actions/setTime.js';

 class Example2 extends React.Component {
   helper() {
     //actions are synchronous
     this.props.setTime('10:00PM');

     return (<h1>hello</h1>);
   }

   render() {
     return (
      {helper()}
     );
   }
 }

 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

 export default connect(null, mapDispatchToProps)(Example2);

Example1 和 Example2 根据 Route 变化呈现。您可能认为我可以使用高阶组件，但我不能，因为这两个组件具有不同的状态并呈现不同的东西。

请注意，我想访问 helper 方法中的 dispatch 函数，并且我没有从该组件访问 Redux 状态，因此我不必担心状态更改（mapStateToProps 未使用）。

Answer 1

这是XY问题。

react-redux 和 connect 应该与组件一起使用，它依赖于组件层次结构（React 上下文）来为组件提供存储。 connect 不应与不属于组件层次结构的函数一起使用。

可以直接在辅助函数中访问 store.dispatch，但这表明存在设计问题，因为 API isn't supposed to be used directly in React

是低级别的

组件组合是 React 中组合功能的惯用方式。 helper 函数执行一个副作用（调度一个动作）和 returns 一个元素。可以表示为连通分量：

const Helper = props => {
 props.setTime('10:00PM');

 return (<h1>hello</h1>);
};


 const mapDispatchToProps = (dispatch) => {
   return {
      setTime: (time) => (dispatch(setTime(time)))
   };
 }

export default connect(null, mapDispatchToProps)(Helper);

Answer 2

我遇到了类似的问题，我通过将 this 传递给辅助函数来解决它。如果您需要通过操作发送它，例如示例可能会有所帮助。

export default const helper = (that) => {
   return <button onClick={()=>that.props.YourDispatch()}/>
}

import helper from './helper.js';

export default class Example extends React.Component {
   return (
      {helper(this)}
   );
}

将 React-Redux 添加到辅助函数

Adding React-Redux to a helper function

action

reactjs

redux