Question

我认为我已经为我的React原生应用程序设置了React Redux。我目前有这个设置。

这里我定义了我想要调用的操作。

＆＃13;

/* actions/mapActions.js */

export const setMarker = selectedMarker => {
  return {
    type: 'SET_MARKER',
    selectedMarker
  }
}

＆＃13;

这里我定义了我想要使用商店的组件的容器。

＆＃13;

//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)

＆＃13;

在这里，我将减速器组合起来，就像我在一直关注的教程中看到的那样。

＆＃13;

//reducers/index.js

import { combineReducers } from 'redux'
import mapReducer from './mapReducer'

const dabApp = combineReducers({
  mapReducer
})

export default dabApp

＆＃13;

这里我定义了组件的reducer。

＆＃13;

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

＆＃13;

＆＃13; 应用程序的主要入口点。

＆＃13;

//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.
});

＆＃13;

这里我定义了组件。

＆＃13;

//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.
});

＆＃13;

我得到的错误是函数＆＃39; markerClick＆＃39;在Map.Marker onPress道具中未定义。我虔诚地遵循了教程，无法找到解决方案。

我正在关注的教程是官方redux网站上的这个教程。 http://redux.js.org/docs/basics/ExampleTodoList.html

有没有人遇到同样的问题？

不幸的是，Harry的回答并没有解决这个问题。

我是console.log（this.props），我明白了：

仍未定义。当我在console.log（this.props＆＃34;）时，我得到了：

＆＃13;

        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",
      }

＆＃13;

所以我甚至不能在我的道具上看到这个功能。

如您所见，该函数未在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也好得多。

使用React Native函数设置Redux未定义

1 个答案: