Stencil Redux not functioning anymore after upgrading to Stencil One

[kelvincy]

Stencil version:

 @stencil/core@1.0.0-beta.2
 @stencil/redux@0.1.1

I'm submitting a:

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Components using redux code do not function correctly anymore using @stencil/redux after upgrading to Stencil One. The store seems to be returning undefined.

Expected behavior:
The store should be defined when initiating with the predefined setStore(store) method.

Steps to reproduce:
Create a store with reducers and initiate the store in a root component.

Related code:
store/index.ts

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import reducers from '../reducers/index';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

const configureStore = (preloadedState: any) =>
  createStore(
    reducers,
    preloadedState,
    composeWithDevTools(applyMiddleware(logger, thunk)),
  );

export { configureStore };

Component

import { Component, Prop } from "@stencil/core";
import { Store } from "@stencil/redux";
import { configureStore } from "../../redux/store/index";

@Component({
  tag: "my-test",
  shadow: true
})
export class MyTestComponent {
  @Prop({ context: "store" }) store: Store;

  componentWillLoad() {
    // Configure store once in this root component
    this.store.setStore(configureStore({}));
  }

  render() {
    return (
      <div></div>
    )
  }
}

Other information:

[serdaraglamis]

Hello all,

I don't know what will be the solution from Stencil team but I found a solution for now. (Btw I don't know if it's the correct way or not, just it worked for me and I wanted to share)

I checked the code at;
https://github.com/ionic-team/stencil-redux/blob/master/src/global/store.ts

I realized that self-invoked function is never called. So without breaking your existing application, you can simply do this as a temporary solution;
inside global/app.ts or inside your app-root.tsx file simply import @stencil/redux package

for example, if your previous code was looking like

import { Component, h, Prop } from '@stencil/core';
import { Store } from "@stencil/redux";`

then add one line;

import { Component, h, Prop } from '@stencil/core';
import '@stencil/redux';
import { Store } from "@stencil/redux";

[imhoffd]

This is likely because of this: #19

[kelvincy]

Adding import '@stencil/redux' to the imports fixes it, thanks @serdaraglamis. Although it is a temporary fix, because using @Prop({ context: 'store' }) store: Store is deprecated.

[Gavman66]

Has there been any more word on a proposed official solution to this?

adding the import seems to have mostly worked but still having issues related to this.

[bdanzer]

I am on v1.2.3 and doing the import mentioned above doesn't seem to work for me.

[edsilv]

It seemed to be working for me with stencil v1.2.4, but after upgrading to v1.3.0 I'm getting this build error:

Global Script: ./node_modules\@stencil\redux\dist\collection\global\store.js
           The code to be executed should be placed within a default function that is exported by the global script.
           Ensure all of the code in the global script is wrapped in the function() that is exported.

[edsilv]

fixes it for me: #49

[felschr]

How about removing @stencil/redux from the stencil documentation until the issues are fixed?
Or at least mention its current state and the temporary workaround.

[bitflower]

Using it successfully since months, currently in 1.8.8