Preserve & pass-through unmapped props #6

gbirke · 2018-10-17T08:36:19Z

I'd like to create a component that has some props connected to the store and some props exposed. When I call connect on a component, I get a new component that has no props. What I would like to have is a new connected component where only the props that were defined in the mapStateToProps and mapActionsToProps are no longer exposed and the other props are still settable.

Maybe there is a workaround (except for putting non-store related code into mapStateToProps)?

Some example code:

import MyComp from './MyComp';

ConnectedMyComp = connect(mapStateToProps)(MyComp)

new Vue({
  el: '#app',
  render: h => h(ConnectedMyComp, {
     // This does not work
    props: {
      nonMappedProp: 'Foo'
    }
   })
})

The text was updated successfully, but these errors were encountered:

Pass in BankDataValidator as a property Simplify validation function Make tests synchronous and clean them up. Change construction in donationForm. The BankDataValidator instance should passed in as a property in initialization, but can't be due to nadimtuhin/redux-vue#6

*Consolidate bank account fields T182298 * Use separate entry point for Vue After many failed attempts to export a Vue component inside src/app/main.js and use it with skins/cat17/src/scripts/donationForm.js, we decided to create a separate entry point and output file. This is a first working demo of a Vue component that's integrated into the Redux store. It's unfortunate that it has to use a gloabl variable for the store, but we could not make any other solution work. * Remove separate entry point The previous failed attempts to integrate Single Page Components in wmde.js "entry point" were caused by the vueify plugin. Removing that plugin in the gulpfile makes the component work. WTF!!!!!! Copied the code over from the entry point, this needs lots of cleanup. * Get Webpack to work in combination with Vue * Implement basic Vue functionality for bank labels * Add Validation to BankData component Insert validation function and validation result processing function as properties. Validation function is a dummy for now. Adapt payment type state aggregration to ignore unfilled bank account and bank number fields. * Use API-based bank data validator * Fix tests for bank account validation * Add css-loader dependency npm says it's needed by the vue-loader. Although we don't use it yet, it's probably a good idea to add it. * Fix coding style issues Delete experimental entry point. * Decouple iban/bic property from store Make setting optional, depending on IBAN field shape - don't change when it's no IBAN. * Add Vue test setup Add separate npm task for Vue-related tests, to keep existing tests fast. Vue tests need JSDOM and initializing JSDOM slows tests down by 1-2 seconds (almost an order of magnitude slower). Add example tests, written in ES6 syntax. Add test setup file that makes the tests Vue and ES6 compatible. Adapt ESLint rules: * allow usage of the spread operator * enforce "const" statements to be on separate lines * force omission of brackets of arrow functions if it's only one parameter. * Add tests for validator property * Unify test commands again Since the "speed culprit" is not JSDOM but babel transpilation and we want to use modern language features in our tests in the future, we use the test setup with babel in all tests. * Move validation states to separate file * Refactor Amount validation Add Transport interface for better abstraction of jQuery and Promises. In the future, we might remove jQuery AJAX methods and replace it with something else. Change AmountValidator to use Transport interface. Make AmountValidator always return a Promise. Convert server errors into resolved promises. * Move AmountValidator to ES6 module And make it a class. Also change AdressValidator to always returns Promises. * Convert FeeValidator to Transport interface * Refactor email validator to use transport * Add BankBankDataValidator class Extract BankBankDataValidator as ES6 class and use Transport interface for it. * Refactor BankData component Pass in BankDataValidator as a property Simplify validation function Make tests synchronous and clean them up. Change construction in donationForm. The BankDataValidator instance should passed in as a property in initialization, but can't be due to nadimtuhin/redux-vue#6 * Rename IBAN and BIC field to accountid and bankID Since the fields can contain several types of data, the BankData component now uses more abstract names. For the backend, "iban" and "bic" need to be preserves as named field values that will be submitted with the form. * Fix code style that was damaged due to merge conflict * Testing validity indication classes The "valid" class shows if a bank data field was filled. In the future we might rename it to "filled". The "invalid" class now reflects the `isValid` property, which can have three values: true, false and null. The latter means "not enough data to determine validity". Use ValidationState constants in validity reducer and change how validity value is determined: State `INCOMPLETE` leads to `null` value. * Add vue translate lib to cat17 * Load messages json * Replace hardcoded messages in BankData component * Remove NOT_APPLICABLE validation state It was previously used by the bank data validation for payment types that were not direct debit (BEZ). * Ignore bank data validity for non-direct debit As a consequence from the removal of NOT_APPLICABLE, there was a bug that prevented form submission if the bank data validation had an error and the user switched to a different payment type. This change acknowledges the fact that we can ignore the bank data validity value in the section validity aggregate if the payment type is not direct debit. * Move translation initialization to donationForm.js Add JSON.parse to create a message object. Move setting `locales` to main initialization. Remove individual "messages" property from BankData Set language in `created` event handler of root component. `mounted` would have beeon too late, as the children mount earlier than the root component. * Fix bankdata test after enabling I18N Inject a mocked translation function in the tests. Move translation calls to template, to keep computed property simple Introduce translation keys for undetermined bank data types. * Add tests for bank data label translation Also remove a stray console.log statement and expand a comment * Display bank name The validator returns the Bank name for German banks, so we display it. * Use validity constants Convert the primitive validation results to constants. * Show validation error message in bank data * Update dependencies for new translations * Make membership page use new Bank Data component * Fix form re-sizing issue in error case Height needs to be at least 285px according to CSS

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preserve & pass-through unmapped props #6

Preserve & pass-through unmapped props #6

gbirke commented Oct 17, 2018

Preserve & pass-through unmapped props #6

Preserve & pass-through unmapped props #6

Comments

gbirke commented Oct 17, 2018