将 Redux Store 连接到组件以使用标记填充地图

Question

简而言之，我正在尝试学习如何使用 redux。正如标题所示，我正在尝试将 redux 存储连接到组件，以便它可以使用标记（我在服务器上获取的标记）填充地图。

我知道我在加载 componentWillMount() 时连接了它。但是通过这样做它 returns 一个 objects 的数组，这不是我想要的。

我不知道我说的对不对，但是我该如何做到 returns 我可以在我的 ./Component 中使用的状态/道具来填充标记地图？

[EDIT1：我已经按照 Pritish 的建议进行了更改]

提前致谢。

./屏幕

class FindOnMapScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userLocation: null,
      plots: []
    };
  }

  getUserLocationHandler = () => {
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        userLocation: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.0622,
          longitudeDelta: 0.0421,
        }
      });
    }, err => console.log(err));
  };

componentDidMount() {
  this.props.onLoadPlacesToMap();
}

  render() {
    console.warn("props", this.props)
    return  (
      <View style={styles.container}>
        <FetchLocation onGetLocation={this.getUserLocationHandler} />
        <UsersMap 
          userLocation={this.state.userLocation}
          props={this.props.plots}
        />
      </View>
      )
    }
  };


const mapStateToProps = state => {
  return {
    plots: state.mapPlaces.plots
  };
};

const mapDispatchToProps = dispatch => {
  return {
      onLoadPlacesToMap: () => dispatch(getPlacesOnMap())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(FindOnMapScreen);

./组件

const usersMap = props => {
let userLocationMarker = null;

if (props.userLocation) {
    userLocationMarker = <MapView.Marker coordinate={props.userLocation} />;
}

const plots = props.plots.map(plots => //.. tried to access here
    <MapView.Marker 
        coordinate={plots} 
        key={plots.id}
    />
);

return (
    <View style={styles.mapContainer}>
        <MapView 
            initialRegion={{
                latitude: 37.78825,
                longitude: -122.4324,
                latitudeDelta: 0.0622,
                longitudeDelta: 0.0421,
            }}
            region={props.userLocation}
            style={styles.map}
        >
            {userLocationMarker}
        </MapView>
    </View>
  );
};

./Store/Actions

export const getPlacesOnMap = () => {
return dispatch => {
    dispatch(authGetToken())
        .then(token => {
            return fetch("myAppURL/file.json?auth=" + token);
        })
        .catch(() => {
            alert("No valid token found!");
        })
        .then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw(new Error());
            }
        })
        .then(parsedRes => {
            const plots = [];
            for (let key in parsedRes) {
                plots.push({
                    latitude: parsedRes[key].location.latitude,
                    longitude: parsedRes[key].location.longitude,
                    id: key
                  });
                } console.log(plots)
                dispatch(mapPlaces(plots));
              })
        .catch(err => {
            alert("Oops! Something went wrong, sorry! :/");
            console.log(err);
        });
    };
};

export const mapPlaces = plots => {
    return {
        type: MAP_PLACES,
        plots: plots
    };
};

./Store/Reducer

const initialState ={
    plots: []
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
      case MAP_PLACES:
        return {
            ...state,
            places: action.plots
        };
        default:
            return state;
    }
};

./ConfigureStore

const rootReducer = combineReducers({
    mapPlaces: mapPlacesReducer
});

Answer 1

因为你的 Component 是一个 stateless 组件，你可以通过 plot props 直接从 this.props 绑定到 state 使用 mapStateToProps.

componentDidMount {
  this.props.onLoadPlacesToMap() // ... Call your prop bound dispatcher func here
}

<UsersMap 
   userLocation={this.state.userLocation} 
   plots={this.props.plots}
/>

并且在您的 Component 中，您可以通过 props.plots

访问它们

在你的 reducer 中，你需要将 places 更改为 plots 或在你的父 class.

中类似地映射和映射它们

case MAP_PLACES:
   return {
     ...state,
     plots: action.plots
 };

将 Redux Store 连接到组件以使用标记填充地图

Connecting Redux Store to Component to populate map with markers

react-native

react-redux

react-native-maps