Question: Does this only work with jsx components?

[dannief]

Hi I am interested in how this works and was just perusing the code. I noticed that your connect function is a HOC that uses jsx in a render function. The readme also says that this library should be used in vue-jsx components. Is that a strict limitation or just what this library was designed for and tested against. If it can only be used in jsx components, why is that?

This is purely for my own education.

Thanks.

[nadimtuhin]

Thats a very good question. react-redux already uses HOC so I figured vue should have one. But .vue files are problematic to compose. So you will need to use js files to use this library if you do not want to use jsx.

// child.js
var Child = {
  template: '<div>A custom component!</div>'
}

export default connect(...)(Child)

for example you can use hoc in this file without writing a babel plugin

[dannief]

Thanks.

So the connect function just wraps the component options object and returns a new options object. The Vue engine would then take that object and create the component instance. Right?

I wonder though, wouldn't this work then?

// child.vue

<template>
  <div>A custom component!</div>
</template>

<script>
  function mapStateToProps(state) {
  ...
  }

  function mapActionToProps(dispatch) {
  	...
  }

  let Child = {
    props: {
    },
    data() {
    },
    methods: {
    }      
  };
  
  export default connect(mapStateToProps, mapActionToProps)(Child);
</script>

I suppose using Vue Class Component wouldn't currently work though. Although it may be possible.

[DeyLak]

I ended up, using 2 files:

import { connect } from 'redux-vue'

import Comp from './index'


const mapStateToProps = (state) => ({})

const mapDispatchToProps = (dispatch) => ({})

export default connect(mapStateToProps, mapDispatchToProps)(Comp)

And standart component file.

[nadimtuhin]

@DeyLak thats geinus 👍 can you update the doc with this example?

[DeyLak]

@nadimtuhin #4