반작용 기본

내가 사용하여 만든 반응 네이티브 응용 프로그램 작업입니다

: create-react-native-app반작용 기본

를 지금까지 내가 가장 최고 수준의 구성 요소를 말할 수는 App.js 파일 안에 내가 거기 공급자를 가져온 그리고 최상위 구성 요소 주위를 감싸하지만, 난 여전히 몇 가지 이유로 다음과 같은 오류가 점점 오전 : 내가 잘못

ExceptionsManager.js:65 Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(App)".

을 뭐하는 거지? 인수가

즉 수출 디폴트 (mapStateToProps, mapDispatchToProps) (앱)

당신이 경우 연결로

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)

출처

2017-12-30 preston

문제는 공급자의 구성 요소가 자식 요소로 돌아 오는 저장소를 제공 무엇 때문에 응용 프로그램 구성 요소가 가게에 대해 아무것도 모르는 것입니다 (null의 mapStateToProps) (응용 프로그램)을 연결합니다. App 구성 요소 자체는 상점에 대한 참조를받지 않으므로 연결을 시도하면 상점을 찾을 수 없습니다.

출처

2017-12-30 20:35:06

잘 함수가 연결이 두 가지 기능의 mapStateToProps 및 mapDispatchToProps이 필요합니다 여기

내 코드입니다 mapDispatchToProps가 없으면 단순히 null을 전달하십시오.

즉 수출 기본값은

출처

2017-12-30 15:47:34

감사하지만 그 차이는 없습니다. 나는 아직도 오류가 발생하고있다 : 불변의 위반 : 컨텍스트 또는 "Connect (App)"의 소품에 "store"를 찾을 수 없다. 에 루트 구성 요소를 래핑하거나 명시 적으로 "스토어"를 "Connect (App)"의 소품으로 전달하십시오. – preston

나는 당신이 Provider와 Connect를 동시에 사용하고 있기 때문에 Redux가 hiearchial 패턴을 따르기 때문에 공급자가 처음에 저장소에 패스 한 다음 connect를 사용하여 그것을 사용하므로 에러가 발생한다고 생각한다. 따라서 더 나은 별도의 파일을 생성한다. 사용하려면 –

을 확인하십시오. https://gist.github.com/aurelkurtula/b30064ba59b3c16d1a6b18260fcd7bcc –

글쎄, 내가 보지 못했던 패턴 인 루트 구성 요소에 대한 직접 연결 기능을 사용했음을 알았습니다. 정상적인 방법을 시도해 봅시다. 루트 구성 요소를 만들어 Provider 내에서 사용하는 것입니다. 그런 다음 하위 구성 요소를 해당 루트 구성 요소로 전달합니다.

그런 다음 각 하위 구성 요소를 새 파일로 분리합니다. 각 파일에서 connect()를 사용하여 redux 저장소를 해당 구성 요소로 전달합니다. 이것은 많은 프로젝트에서 볼 수있는 공통 패턴입니다. 그리고이 패턴은 위와 같은 혼란스러운 상황을 피하는 데 도움이됩니다!

출처

2017-12-31 08:37:52

반작용 기본

답변

관련 문제