react-native - 将 Redux Store 连接到组件以使用标记填充地图
问题描述
简而言之,我正在尝试学习如何使用 redux。正如标题所示,我正在尝试将 redux 存储连接到组件,以便它可以使用标记(我在服务器上获取的)填充地图。
我知道我在加载 componentWillMount() 时已经连接了它。但是这样做会返回一个对象数组,这不是我真正想要的。
我不知道我说的是否正确,但是我该如何让它返回一个状态/道具,我可以在我的 ./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>
);
};
./存储/操作
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
};
};
./存储/减速器
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
});
解决方案
由于您的组件是无状态的,您可以将绘图 props
直接传递给它,使用this.props
它绑定到商店的状态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
case MAP_PLACES:
return {
...state,
plots: action.plots
};
推荐阅读
- eclipse - Tomcat 重复从 Eclipse 运行的 httpHeaderSecurity
- discord - Discord GitHub Webhook 添加角色 ping
- docker - 码头工人:为什么无法连接到种子
- database - 找出客户与图形数据库中最受欢迎的产品一起购买了什么
- php - 在 PHP 7.4 代码升级期间,class.settings.php 中的数组到字符串转换为 833
- java - 如何将加密消息更改回解密消息?
- java - Flutter App 失败:未知属性“buildToolsVersion”
- terraform - Terraform 最佳实践多环境、模块和状态
- linux - 移动 /usr 目录后系统无法启动
- numpy - numpy数组中的多维索引