React Native 错误错误:在"Connect(App)"上下文中找不到"商店"

cwtwac6a  于 2022-12-23  发布在  React
关注(0)|答案(3)|浏览(181)

这是我的错误:

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.

这是我的密码
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);
  • 如何解决这个错误,我的错误在哪里,我不知道我做错了什么
  • 我正在做一个类似示例的项目,但它给了我一个错误
  • 你能给予我一些建议吗?我在哪里做错了,哪里发生了什么事
  • 我正在使用react native在类组件中添加redux分派和使用useSelector我尝试了许多解决方案,但我不太理解如何使用react native在类内组件中执行redux
1l5u6lss

1l5u6lss1#

问题

store.js文件中的代码有点不可靠。
1.没有命名的configureStore导出。
1.导出了一个store引用,但它是createStore和自定义存储配置器函数的奇怪的自引用混合体。

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);

溶液

最好是使用根缩减函数创建和导出存储。

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

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

export const store = createStore(rootReducer);

导入store并传递给Provider组件。

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>
);
ryhaxcpt

ryhaxcpt2#

我想我应该理解你的问题。
您可以为两个组件(APP)指定相同的名称,并且可以更改一个组件或屏幕。

8mmmxcuj

8mmmxcuj3#

在您的store.js中尝试以下代码

import { createStore, combineReducers } from 'redux';
import countReducer from './Reducers'
const rootReducer = combineReducers(
    { count: countReducer }
);

export const store= createStore(rootReducer);

相关问题