Подключение Redux Store к компоненту для заполнения карты маркерами - PullRequest
Новая
       20

Подключение Redux Store к компоненту для заполнения карты маркерами

0 голосов
/ 31 августа 2018

Короче я пытаюсь научиться пользоваться редуксом. Как следует из заголовка, я пытаюсь подключить хранилище избыточных данных к компоненту, чтобы он мог заполнить карту маркерами (которые я получил на сервере).

Я знаю, что подключил его, когда загружаю componentWillMount (). Но при этом он возвращает массив объектов, чего я не хочу.

Не знаю, правильно ли я это говорю, но как мне сделать так, чтобы он возвращал состояние / реквизиты, которые я могу использовать в своем ./Component для заполнения маркеров на карте?

[РЕДАКТИРОВАТЬ1: я включил изменения, как предложено Pritish]

Заранее спасибо.

. / Screen 

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

1 Ответ

0 голосов
/ 31 августа 2018

Поскольку ваш Компонент является элементом без состояния , вы можете передать ему участок props непосредственно из this.props, который связан с состояние магазина с использованием mapStateToProps. 

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

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

и в вашем Компоненте вы можете получить к ним доступ по props.plots

В вашем редукторе вам нужно либо изменить places на plots, либо отобразить и сопоставить их аналогично в родительском классе. 

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