0

Because of the complexity of a project that I inherited, I am trying to access a redux store by importing it, as proposed in https://stackoverflow.com/a/41172768/5532513.

The relevant code in the ts module that is trying to import the store (it is exported from a js module) is provided below.

I am getting the following error while running the code:

ERROR    Invariant Violation: Could not find "store" in either the context
or props of "Connect(ServiceUtil)". Either wrap the root component in a
<Provider>, or explicitly pass "store" as a prop to "Connect(ServiceUtil)".

Any idea why?

The relevant code:

import * as React from "react";
import { connect } from 'react-redux';
import { reduxStore as store } from '../main/main';
...
export interface Props_Imp {
    a: string;
    b : boolean;
};

export interface State_Imp {
};

class Lesson extends React.Component<Props_Imp, State_Imp> {
...
}

const mapStateToProps = (state) => {
    return {
        a: state.get('a'),
    }
}

const mapDispatchToProps = dispatch => {
    return {
        func1: (number) =>
            dispatch({ type: 'FUNC1', payload: number}),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Lesson);
Yossi
  • 5,577
  • 7
  • 41
  • 76
  • This example shows you are importing as 'store', but nowhere in the example are your referencing it. Seems as if your root component should be importing it, and then providing it to the child components via injection or properties. – Steven Spungin Mar 13 '22 at 00:13
  • Try to wrap your `app` component in a `provider` component. – Steven Spungin Mar 13 '22 at 00:19
  • I didn't include the code referencing it, wanted to present few lines of code. The refencing statements didn't work. – Yossi Mar 13 '22 at 14:16

1 Answers1

1

The example you are following is not for react-redux.

If you use react-redux with connect etc you need to wrap you components in a ` e.g.:

import { reduxStore as store } from '../main/main';
import { Provider } from 'react-redux';

const Root = () => (
   <Provider store={reduxStore}>
     <App /> 
   </Provider>
);

here <App /> is a stand-in for your root app component.

If you import the store directly you could use store.dispatch and store.getState. I don't recommend this by the way since this defeats the purpose of using react-redux, but here's an example:

import * as React from "react";
import { connect } from 'react-redux';
import { reduxStore as store } from '../main/main';

export interface Props_Imp {
    a: string;
    b : boolean;
    func1: (n: number) => void;
};

export interface State_Imp {
};

class Lesson extends React.Component<Props_Imp, State_Imp> {
   
    // call this.onFunc1 to trigger a dispatch to the store
    public onFunc1(n: number) {
         reduxStore.dispatch({ type: 'FUNC1', payload: number });
    }
  
    public render() {
        const { a } = reduxStore.getState();
        // Do whatever with a
    }
}

export default Lesson;
apokryfos
  • 38,771
  • 9
  • 70
  • 114