ERROR Error: Could not find "store" in the context of "Connect(App)"

Question

This is my error:

ERROR  Error: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(App) in connect options.

This error is located at:
    in Connect(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in ReactNativeApp(RootComponent)

ERROR  TypeError: (0, _$$_REQUIRE(_dependencyMap[4], "./Redux/store").configureStore) is not a function. (In '(0, _$$_REQUIRE(_dependencyMap[4], "./Redux/store").configureStore)()', '(0, _$$_REQUIRE(_dependencyMap[4], "./Redux/store").configureStore)' is undefined)    
             
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

This is my code

index.js

import { AppRegistry } from 'react-native';
import React from 'react';
import App from './Redux/App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';

import { configureStore } from './Redux/store';

const store = configureStore()

const RNRedux = () => (
  <Provider store = { store }>
    <App />
  </Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

redux/App.js

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Button,
    Text
} from 'react-native';
import { connect, Provider } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as countActions from './Action';

class App extends Component {
    decrementCount() {
        let { count, actions } = this.props;
        count--;
        actions.changeCount(count);
    }
    incrementCount() {
        let { count, actions } = this.props;
        count++;
        actions.changeCount(count);
    }
    render() {
        const { count } = this.props;
        return (

            <View styles={styles.container}>
                <Button
                    title="increment"
                    onPress={() => this.incrementCount()}
                />
                <Text style={styles.textCenter}>{count}</Text>
                <Button
                    title="decrement"
                    onPress={() => this.decrementCount()}
                />
            </View>

        );
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textCenter: {
        textAlign: 'center'
    }
});

const mapStateToProps = state => ({
    count: state.count.count,
});

const ActionCreators = Object.assign(
    {},
    countActions,
);
const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(ActionCreators, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(App)

Action.js

import { COUNTER_CHANGE } from './ActionType';
export function changeCount(count) {
  return {
    type: COUNTER_CHANGE,
    payload: count
  }
}

ActionType.js

export const COUNTER_CHANGE = 'COUNTER_CHANGE'

Reducer.js

import { COUNTER_CHANGE } from './ActionType';

const initialState = {
  count: 0
};

const countReducer = (state = initialState, action) => {
  switch(action.type) {
    case COUNTER_CHANGE:
      return {
        ...state,
        count:action.payload
      };
    default:
      return state;
  }
}
export default countReducer;

store.js

import { createStore, combineReducers } from 'redux';
import countReducer from './Reducers'

const rootReducer = combineReducers(
    { count: countReducer }
);

const configureStore = () => {
    return createStore(rootReducer);
}

export const store= createStore(configureStore);

• How to solve this error and where is my error I don't know where I do a mistake

• I'm doing a project like an example but it is it gives me an error

• can you give me the suggestion on where I do a mistake and where something happen wrong

• I'm adding redux dispatch and using useSelector in a class component with react native I'm trying to do many solutions but I don't understand properly how to do redux in-class component with react native

Answer 1

Issue

The code in your store.js file is a bit wonky.

1. There is no named configureStore export.
2. A store reference is exported, but it's an odd self-referencing amalgam of createStore and a custom store configurator function.

import { createStore, combineReducers } from 'redux';
import countReducer from './Reducers';

const rootReducer = combineReducers({
  count: countReducer
});

const configureStore = () => {
  return createStore(rootReducer); // <-- calls createStore again??
}

// This is the only export, but it oddly is passed the
// configureStore function instead of the Redux arguments
export const store = createStore(configureStore);

Solution

It's probably best to just create and export the store with the root reducer function.

import { createStore, combineReducers } from 'redux';
import countReducer from './Reducers';

const rootReducer = combineReducers({
  count: countReducer
});

export const store = createStore(rootReducer);

Import store and pass to the Provider component.

import { AppRegistry } from 'react-native';
import React from 'react';
import App from './Redux/App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import { store } from './Redux/store'; // <-- import named export store

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

Answer 2

I think I should understand your problem.

You make the same name of two components (APP), and you can change one component or screen.