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
3
Answers
I think I should understand your problem.
You make the same name of two components (APP), and you can change one component or screen.
Try this code in your
store.js
Issue
The code in your
store.js
file is a bit wonky.configureStore
export.store
reference is exported, but it’s an odd self-referencing amalgam ofcreateStore
and a custom store configurator function.Solution
It’s probably best to just create and export the store with the root reducer function.
Import
store
and pass to theProvider
component.