Как передать аргументы функции внутри compose? - PullRequest
Новая
       25

Как передать аргументы функции внутри compose?

0 голосов
/ 23 апреля 2019

У меня есть такая функция: 

export const fireView = (prop1, prop2) => WrappedComponent =>
    class extends Component {
    //stuff in here
}

то вот так: 

export const withFireView = (prop1, prop2) =>
    fireView(prop1, prop2)

но теперь я хочу поместить эту функцию в compose, так как мне нужно вызвать ее с помощью mapStateToProps

так я и сделал: 

compose (
    connect(mapStateToProps),
    fireView
)

но он ломается, потому что You must pass a component to the function returned by connect

поэтому я избавляюсь от аргументов в функции fireview и думаю, что это сработает, но теперь все аргументы внутри функции не определены, поскольку я их не передавал

Есть ли способ сделать что-то вроде этого: 

compose (
    connect(mapStateToProps),
    fireView(arg1, arg2)
)

но, очевидно, они там не определены, если это имеет смысл.

Ответы [ 2 ]

0 голосов
/ 23 апреля 2019

Вы можете заставить withFireView возвращать функцию. Все будет работать. 

export const withFireView = (prop1, prop2) => () => fireView(prop1, prop2)
0 голосов
/ 23 апреля 2019

Вот полный рабочий пример: 

var Component = React.Component;
var render = ReactDOM.render;
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
var createStore = Redux.createStore;
var compose = Redux.compose;
    
const reducer = () => {return {}};
const mapStateToProps = () => {
  return {}; 
};
    
const wrapped = (props) => {
  return <div>{props.prop1} {props.prop2}</div>;
}
const fireView = (prop1, prop2) => WrappedComponent => {
  return class extends Component {
    render() {
      return <WrappedComponent prop1={prop1} prop2={prop2} />; 
    }   
  }
} 
    
const withFireView = (prop1, prop2) => fireView(prop1, prop2);
    
const withFireViewAndConnect = (arg1, arg2) => compose(connect(mapStateToProps), withFireView(arg1, arg2));
    
const App = withFireViewAndConnect('some', 'arg')(wrapped);
    
render(<Provider store={createStore(reducer)}><App /></Provider>, document.getElementById('demo'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.13.0/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.js"></script>

<div id="demo"></div>
...