在“Connect(App)”的上下文或道具中找不到“商店”。我已经有一个包装组件的 <Provider>

Question

不变违规：在“Connect(App)”的上下文或道具中找不到“store”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(App)”。

我讨厌问一个已经被问过很多次的问题的变体，但我已经尝试了所有建议的解决方案，但没有成功。 https://codesandbox.io/s/0pyl7n315w

index.js

import React, {Component} from 'react'
import {AppRegistry} from 'react-native'
import {Provider} from 'react-redux'
import App from './app'

import configureStore from './store.js'
const store = configureStore();

class MyCounterApp extends Component {
    render() {
        return(
            <Provider store={store}>
            <App/>
            </Provider>
        )
    }
}

AppRegistry.registerComponent('MyCounterApp', () => MyCounterApp)

app.js

import React from 'react';
import {Button, Text, View} from 'react-native';
import {addToCounter} from "./actions";
import { connect } from 'react-redux';

class App extends React.Component {

    handleOnClick = event => {
        this.props.addToCounter()
    };

    render() {
        return (
                <View>

                    <Text>{this.props.count}</Text>

                    <Button onPress={() => this.props.addToCounter()}
                         title={"Click Me!"}>
                     </Button>

                </View>
    )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        addToCounter: () => dispatch(addToCounter())
    }
}

function mapStateToProps(state) {
    return {
        count: state.count
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(App)

store.js

import reducer from './reducer'
import {createStore} from 'redux'

export default function configureStore() {
    let store = createStore(
        reducer
    )
    return store
}

reducer.js

import {ADD_TO_COUNTER} from './actions'

const initialState = {
    counter: 0
}


const reducer = (state = initialState, action) => {

    switch (action.type) {
        case ADD_TO_COUNTER:
            return {
                ...state,
                counter: state.counter + 1
            }
        default:
            return state
    }
}

export default reducer;

我正在学习本教程： https://medium.com/@pavsidhu/using-redux-with-react-native-9d07381507fe

Answer 1

如果您想在不使用 store 的情况下测试组件，您要做的第一件事就是导出断开连接的组件，例如：export { Component }。

然后你必须像这样导入你的测试文件：import { Component } from ...

如果错误仍然存​​在，请查看组件是否使用已连接的组件，如果是，则必须模拟该组件，例如： jest.mock('../../../AnotherComponent', () => ChildComponent => props => <ChildComponent {...props} />);

例子：

const Component = (props: Props) => (
        <>
            ...
            <AnotherComponent // connected component inside <Component />
                {...props}
            />
        </>
    )

const mapStateToProps = (state: State) => ({});
const mapDispatchToProps = {

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Component);

export { Component }; // disconnected component

Answer 2

您尚未为您的 App 组件提供商店。这就是为什么无法将组件与reducer连接起来的原因：

class MyCounterApp extends Component {
    render() {
        return(
            <Provider store={store}>
                <App/>
            </Provider>
        )
    }
}

从 app.js 中移除提供者