React native 将Redux与React Native一起使用

我正在使用以下方法创建react本机应用程序：

create react本机应用程序

据我所知，最顶级的组件在App.js文件中，我已经在那里导入了提供者，并将其包装在顶级组件周围，但出于某种原因，我仍然收到以下错误：

ExceptionsManager.js:65不变冲突：在中找不到“存储” “连接（应用）”的上下文或道具。要么把根包起来 组件，或将“存储”作为道具显式传递给 “连接（应用程序）”

我做错了什么

这是我的密码：

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)

从“React”导入React；
从“react native”导入{样式表、文本、视图、平面列表、文本输入、状态栏、按钮、TouchableOpacity}；
从“反应导航”导入{TabNavigator，StackNavigator}；
从“expo”导入{Constants}
从“/utils/colors”导入{紫色，白色}
从“/utils/api”导入{saveDeckTitle、getDeck、getDeck、addCardToDeck}
从“react redux”导入{Provider}
从“redux”导入{createStore}
从“./reducers”导入减速机
从“react redux”导入{connect}
从“./组件/组”导入组
从“./components/NewQuestionView”导入NewQuestionView
从“./components/NewDeck”导入NewDeck
常数R=require（'ramda'）
const store=createStore（reducer）
const DecksETC=StackNavigator({
甲板：{
屏幕：甲板
},
新甲板：{
屏幕：NewDeck
},
新问题视图：{
屏幕：NewQuestionView
}
})
const NewDeckETC=StackNavigator({
新甲板：{
屏幕：NewDeck
},
甲板：{
屏幕：甲板
},
新问题视图：{
屏幕：NewQuestionView
}
})
const Tabs=TabNavigator({
DecksETC：{
屏幕：DecksETC
},
纽代克等：{
屏幕：NewDeck等
}
});
类应用程序扩展了React.Component{
render（）{
console.log（'R'，R）
返回(
// 
);
}
}
const styles=StyleSheet.create({
容器：{
paddingTop:23，
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
输入：{
差额：15，
身高：40，
边框颜色：“#7a42f4”，
边框宽度：1
},
});
函数MapStateTops（状态）{
console.log（'mapstatetops'）
调试器
返回{
“样本”：“样本”
}
}
导出默认连接（MapStateTops）（应用程序）

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

i、 e.导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）

如果没有mapDispatchToProps，只需传递null即可

---

i、 e.导出默认连接（mapStateToProps，null）（应用）

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

i、 e.导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）

如果没有mapDispatchToProps，只需传递null即可

---

i、 e.导出默认连接（mapStateToProps，null）（App）

问题是App组件不知道有关存储的任何信息，因为提供者组件将Redux存储带到其子组件中。应用程序组件本身没有收到对应用商店的引用，因此当您尝试连接时，找不到应用商店。

问题是，应用程序组件对应用商店一无所知，因为提供者组件将Redux应用商店带入其子组件。应用程序组件本身没有收到对应用商店的引用，因此当您尝试连接时，找不到应用商店。

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

---

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

我看到您直接使用了根组件的connect函数，这是我以前从未见过的模式。让我们试试正常的方法，即创建一个根组件，然后在提供程序内部使用它。然后将子组件传递到该根组件中

---

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

谢谢，但那没什么区别。我仍然收到错误：不变冲突：在“连接（应用）”的上下文或道具中找不到“存储”。将根组件包装在中，或者将“store”作为道具显式传递给“Connect（App）”。我认为出现此错误是因为您同时使用提供程序和Connect，Redux遵循分层模式，因此您必须先在提供程序中传递store，然后使用Connect，所以最好创建一个单独的文件来使用connectCheck，谢谢，但这并没有什么区别。我仍然收到错误：不变冲突：在“连接（应用）”的上下文或道具中找不到“存储”。将根组件包装在中，或者将“store”作为道具显式传递给“Connect（App）”。我认为出现此错误是因为您同时使用提供程序和Connect，Redux遵循分层模式，因此您必须先在提供程序中传递store，然后使用Connect，因此，最好创建一个单独的文件来使用connectCheck