Reactネイティブ関数でのReduxの設定が未定義

Question

ReactネイティブアプリのReact Reduxの設定には近いと思います。私は現在この設定をしています。

ここでは、私が呼びたいアクションを定義します。ここで

/* actions/mapActions.js */ 
 

 
export const setMarker = selectedMarker => { 
 
    return { 
 
    type: 'SET_MARKER', 
 
    selectedMarker 
 
    } 
 
}

私は私が店を利用したいコンポーネントのコンテナを定義します。ここで

//containers/mapContainers.js 
 

 
import { connect } from 'react-redux'; 
 
import { setMarker } from './actions/mapActions' 
 
import HomeScreen from './screens/HomeScreen' 
 

 
const mapStateToProps = state => { 
 
    return { 
 
    selectedMarker: state.marker 
 
    } 
 
} 
 

 
const mapDispatchToProps = dispatch => { 
 
    return { 
 
    markerClick: (marker) => { 
 
     dispatch(setMarker(marker)) 
 
    } 
 
    } 
 
} 
 

 
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

私はチュートリアルで見てきたように私は減速を組み合わせ私は従ってきた。

//reducers/index.js 
 

 
import { combineReducers } from 'redux' 
 
import mapReducer from './mapReducer' 
 

 
const dabApp = combineReducers({ 
 
    mapReducer 
 
}) 
 

 
export default dabApp

は、ここで私は、コンポーネントの減速を定義します。

//reducers/mapReducers.js 
 

 
const mapReducer = (state = [], action) => { 
 
    switch (action.type) { 
 
    case 'SET_MARKER': 
 
     return [ 
 
     ...state, 
 
     { 
 
      marker: action.marker 
 
     } 
 
     ] 
 
    default: 
 
     return state 
 
    } 
 
} 
 

 
export default mapReducer

アプリケーションのメインエントリポイント。

//App.js 
 

 
// other imports here 
 
import { Provider } from 'react-redux'; 
 
import { createStore } from 'redux'; 
 
import snapApp from './reducers'; 
 

 
let store = createStore(dabApp); 
 

 
export default class App extends React.Component { 
 
    state = { 
 
    isLoadingComplete: false, 
 
    }; 
 

 
    render() { 
 
     return (
 
     <Provider store={store}> 
 
      <View style={styles.container}> 
 
      {Platform.OS === 'ios' && <StatusBar barStyle="default" />} 
 
      {Platform.OS === 'android' && 
 
       <View style={styles.statusBarUnderlay} />} 
 
       <RootNavigation /> 
 
      </View> 
 
     </Provider> 
 
    ); 
 
    } 
 

 

 

 
} 
 

 
const styles = StyleSheet.create({ 
 
//Styles. 
 
});

は、ここで私は、コンポーネントを定義します。

//Standard react imports. 
 

 
import { MapView } from 'expo'; 
 
import { connect } from 'react-redux'; 
 

 
export default class HomeScreen extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    //Set states. 
 
    }; 
 
} 
 

 

 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     <MapView 
 
     //MapView info 
 
     > 
 
     {this.state.markers.map((marker) => 
 
      <MapView.Marker 
 
      key={marker.id} 
 
      coordinate={marker.coordinate} 
 
      onPress={() => {this.props.markerClick(marker); this.props.navigation.navigate('Information');}}> 
 
      </MapView.Marker> 
 
     )} 
 
     </MapView> 
 
     </View> 
 
    ); 
 
    } 
 

 
} 
 

 
const styles = StyleSheet.create({ 
 
    //Styles. 
 
});

私が手にエラーが関数 'markerClick' がMap.MarkerたonPress小道具に定義されていないということです。私は宗教的にチュートリアルに従っており、これに対する解決策を見つけることはできません。

私が従っていたチュートリアルは、公式のreduxサイトのこのチュートリアルでした。 http://redux.js.org/docs/basics/ExampleTodoList.html。

誰も同じ問題が発生しましたか？

残念ながら、ハリーの答えはこの問題を解決していません。

私は（this.propsを）にconsole.log、私はこれを取得：

がまだ定義されていません。私は（this.propsを」）にconsole.logときに私が取得：

 Object { 
 
      "navigation": Object { 
 
      "dispatch": [Function anonymous], 
 
      "goBack": [Function goBack], 
 
      "navigate": [Function navigate], 
 
      "setParams": [Function setParams], 
 
      "state": Object { 
 
      "key": "Home", 
 
      "routeName": "Home", 
 
      }, 
 
     }, 
 
     "screenProps": undefined, 
 
     "selectedMarker": [Function dispatch], 
 
     "type": "SET_MARKER", 
 
     }

ので、私も私の小道具に機能が表示されていない

あなたが見ることができるように、。関数がthis.propsに定義されていません。

おかげで、あなたは必要以上のステップを作っているように私は感じ

Answer 1

。

このような何かを試してみてください：

import React, { Component } from 'react'; 
import { MapView } from 'expo'; 
import { connect } from 'react-redux'; 
import { View, StyleSheet } from 'react-native'; 
import { setMarker } from './actions/mapActions' 


class HomeScreen extends Component { 
    onPress(marker) { 
    this.props.setMarker(marker); 
    this.props.navigation.navigate('Information'); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView> 
      {this.state.markers.map((marker) => (
      <MapView.Marker 
       key={marker.id} 
       coordinate={marker.coordinate} 
       onPress={() => { this.onPress(marker); }} 
      /> 
      ) 
     )} 
     </MapView> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    //Styles. 
}); 

export default connect(null, setMarker)(HomeScreen); 

あなたはその後、アクションをディスパッチする機能を定義する必要はありません、あなただけのコンポーネントにアクションを接続することができます。 別のmapContainers.jsを使用する代わりに、同じファイル内にすべてを持つだけでなく、もっと便利です。