Обновление магазина Redux, но mapStateToProps не обновляет реквизиты компонента - PullRequest
Новая
       32

Обновление магазина Redux, но mapStateToProps не обновляет реквизиты компонента

0 голосов
/ 02 февраля 2019

Когда я нажимаю на указатель на моем компоненте Google Maps, я вижу, что мой магазин обновляется в Redux Devtools, но mapStateToProps, похоже, не обновляет реквизиты моего компонента.Поэтому мои указатели Google Maps <InfoWindow> не открываются.

Если я перейду на другую ссылку (используя реагирующий маршрутизатор) из моего NavBar, а затем вернусь на эту страницу, компонент получит обновленные реквизиты от mapStateToProps и ранее нажатый указатель Google Maps имеет открытую <InfoWindow>.

Я пытался отлаживать это в течение последней недели, пытался преобразовать components/ClassSchedule/Map/Pure.jsx в компонент класса, но он не работал.

компоненты / ClassSchedule / Map / index.js 

import { connect } from 'react-redux';
import { selectClass } from '../../../actions/index';
import Pure from './Pure';

const mapStateToProps = state => ({
  selectedClass: state.classMapTable.selectedClass,
});

const mapDispatchToProps = dispatch => ({
  selectClass: id => dispatch(selectClass(id)),
});

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

компоненты / ClassSchedule / Map / Pure.jsx 

import React from 'react';
import MapContent from './MapContent';

const Map = props => {
  return (
    <MapContent
      googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=googleMapsKeyHere`}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `550px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      {...props}
    />
  );
};

export default Map;

компоненты / ClassSchedule / Map / MapContent.jsx 

import React from 'react';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow,
} from 'react-google-maps';

import { defaultPosition } from '../../../data/mapData';
import { classes } from '../../../data/classData';
const { zoom, centre } = defaultPosition;

const MapContent = withScriptjs(
  withGoogleMap(({ selectedClass, selectClass }) => (
    <GoogleMap defaultZoom={zoom} defaultCenter={centre}>
      {classes.map(c => (
        <Marker
          key={`map${c.id}`}
          icon={
            'https://mt.google.com/vt/icon?psize=30&font=fonts/arialuni_t.ttf&color=ff304C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=48&text=%E2%80%A2'
          }
          position={c.coordinates}
          onClick={() => selectClass(c.id)}
        >
          {selectedClass === c.id && (
            <InfoWindow>
              <React.Fragment>
                <div>{c.area}</div>
                <div>{`${c.level} ${c.subject}`}</div>
                <div>{`${c.day}, ${c.time}`}</div>
              </React.Fragment>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </GoogleMap>
  ))
);

export default MapContent;

Редукторы / index.js 

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import classMapTable from './classMapTable';

export default history =>
  combineReducers({
    router: connectRouter(history),
    classMapTable,
  });

Редукторы / classMapTable.js 

const classMapTable = (state = {}, action) => {
  switch (action.type) {
    case 'SELECT_CLASS':
      return { ...state, selectedClass: action.classId };
    default:
      return state;
  }
};

export default classMapTable;

store / index.js 

import { createBrowserHistory } from 'history';
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import { composeWithDevTools } from 'redux-devtools-extension';
import createRootReducer from '../reducers';

export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history),
    preloadedState,
    composeWithDevTools(applyMiddleware(routerMiddleware(history)))
  );
  return store;
}

actions / index.js 

export const selectClass = classId => ({
  type: 'SELECT_CLASS',
  classId,
});

1 Ответ

0 голосов
/ 08 февраля 2019

После отладки в течение примерно 2 недель я случайно решил запустить npm update.Оказалось, что с моим кодом не было никаких проблем, мои npm-пакеты были просто устаревшими / несовместимыми.Я понятия не имею, как у меня были разные версии «реагировать» и «реагировать».ВСЕ РАБОТАЕТ СЕЙЧАС.

Это было в моем package.json: 

"react": "^16.7.0",
"react-dev-utils": "^7.0.0",
"react-dom": "^16.4.2",

После обновления моего package.json: 

"react": "^16.8.1",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.8.1",

Мораль истории: сохраняй своеУПАКОВКИ ДО ДАТЫ.

...