Question

我正在使用：create-react-native-app

创建一个使用本机的反应应用

据我所知，最顶层的组件位于App.js文件中，我已经在那里导入了Provider并将其包装在顶级组件中但是由于某种原因我仍然遇到以下错误：

ExceptionsManager.js：65不变违规：找不到＆＃34;存储＆＃34;在连接（应用）和＃34;的上下文或道具。包裹根 a中的组件，或明确传递＆＃34; store＆＃34;作为支柱＆＃34;连接（APP）＆＃34;

我做错了什么？

这是我的代码：

import React from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button,TouchableOpacity } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Constants } from 'expo'
import { purple, white } from './utils/colors'
import { saveDeckTitle, getDecks, getDeck, addCardToDeck } from './utils/api'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import { connect } from 'react-redux'
import Decks from './components/Decks'
import NewQuestionView from './components/NewQuestionView'
import NewDeck from './components/NewDeck'

const R = require('ramda')

const store = createStore(reducer)


const DecksETC = StackNavigator({
  Decks: {
    screen: Decks
  },
  NewDeck: {
    screen: NewDeck
  },
  NewQuestionView: {
    screen: NewQuestionView
  }
})

const NewDeckETC = StackNavigator({
  NewDeck: {
    screen: NewDeck
  },
  Decks: {
    screen: Decks
  },
  NewQuestionView: {
    screen: NewQuestionView
  }
})


const Tabs = TabNavigator({

  DecksETC: {
    screen: DecksETC
  },
  NewDeckETC: {
    screen: NewDeckETC
  }
});






class App extends React.Component {


  render() {

    console.log('R', R)

    return (

      <Provider store={store}>
        <Tabs />
      </Provider>
      // <Tabs />

    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 23,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
});

function mapStateToProps(state) {
  console.log('mapStateToProps')
  debugger
  return {
    'sample': 'sample'
  }

}

export default connect(mapStateToProps)(App)

Answer 1

问题在于App组件对商店一无所知，因为Provider组件是将Redux商店引入其子组件的原因。 App组件本身不会收到对商店的引用，因此当您尝试连接时，找不到商店。

Answer 2

我看到你直接使用了根组件的连接功能，这是我以前从未见过的模式。让我们尝试正常的方法，即您将创建一个Root组件并在Provider中使用它。然后，您将子组件传递到该根组件中。

然后，您将每个子组件分隔为一个新文件。在每个文件中，您将使用connect（）将redux存储传递到该组件。这是我在许多项目中看到的常见模式。而这种模式将帮助您避免混淆上述情况！

Answer 3

函数connect需要两个函数mapStateToProps和mapDispatchToProps作为参数

即。 export default connect（mapStateToProps，mapDispatchToProps）（App）

如果你没有mapDispatchToProps，那么只需传递null。

即。 export default connect（mapStateToProps，null）（App）

将Redux与React Native

3 个答案: