将 Redux 与 React Native 一起使用答案

【问题标题】：Using Redux with React Native将 Redux 与 React Native 一起使用
【发布时间】：2018-06-10 13:46:19
【问题描述】：

我正在开发一个使用以下代码创建的 react-native 应用：create-react-native-app

据我所知，最顶层的组件在 App.js 文件中，我已经在那里导入了 Provider 并将它包裹在顶层组件周围，但由于某种原因我仍然收到以下错误：

ExceptionsManager.js:65 不变违规：在 “Connect(App)”的上下文或道具。要么包裹根 a 中的组件，或显式将“store”作为道具传递给 “连接（应用程序）”。

我做错了什么？

这是我的代码：

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-native redux react-redux

【解决方案1】：

问题在于 App 组件对存储一无所知，因为 Provider 组件将 Redux 存储引入其子组件。 App 组件本身并没有收到对 store 的引用，所以当你尝试连接时，没有找到 store。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

即导出默认连接(mapStateToProps,mapDispatchToProps)(App)

如果您没有 mapDispatchToProps，则只需传递 null。

即导出默认连接(mapStateToProps,null)(App)

【讨论】：

谢谢，但这并没有什么不同。我仍然收到错误：不变违规：在“连接（应用）”的上下文或道具中找不到“商店”。要么将根组件包装在中，要么将“store”作为道具显式传递给“Connect(App)”。
我认为出现错误是因为您同时使用了提供程序和连接，Redux 遵循分层模式，因此您首先通过提供程序中的存储，然后使用连接使用它，所以最好创建一个单独的文件来使用连接
看看这个gist.github.com/aurelkurtula/b30064ba59b3c16d1a6b18260fcd7bcc