Почему мой компонент <Cities /> в проекте ReactJS не видит никаких реквизитов? - PullRequest
Новая
       0

Почему мой компонент <Cities /> в проекте ReactJS не видит никаких реквизитов?

0 голосов
/ 13 сентября 2018

Мой вопрос о том, почему мой компонент Cities в проекте React не видит никаких объектов. Что здесь не так? Также я не могу понять, почему редуктор не обновляет состояние с помощью Axios Async. Что здесь не так?

Вот ссылка на github для этого проекта: https://github.com/technoiswatchingyou/reg-form-demo

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { citiesRequestReducer } from './citiesRequestReducer';

const rootReducer = combineReducers({
  cities: citiesRequestReducer
});

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

App.js 

import React, { Component } from 'react';
import './App.css';
import Cities from './cities';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Cities />
      </div>
    );
  }
}

export default App;

cities.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { citiesRequestAction } from './citiesRequestAction';
import { bindActionCreators } from 'redux';

class Cities extends Component {
  componentDidMount() {
    this.props.onCitiesRequest();
    console.log(this.props);
  }

  render() {
    return (
      <select className="custom-select">
        {this.props.cities.map(city => (
          <option key={city.id}>{city.name}</option>
        ))}
      </select>
    );
  }
}

const mapStateToProps = state => ({
  cities: state.cities
});

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      onCitiesRequest: citiesRequestAction
    },
    dispatch
  );
};

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

citiesRequestReducer.js 

import { CITIES_REQUEST } from './citiesRequestAction';

const initialState = [];

export function citiesRequestReducer(state = initialState, action) {
  switch (action.type) {
    case CITIES_REQUEST:
      return {
        ...state,
        cities: action.payload
      };
    default:
      return state;
  }
}

citiesRequestAction.js 

import axios from 'axios';

export const CITIES_REQUEST = 'CITIES_REQUEST';
const GET_CITIES_URL = 'https://www.mocky.io/v2/5b34c0d82f00007400376066?mocky-delay=700ms';

function citiesRequest(cities) {
  return {
    type: CITIES_REQUEST,
    payload: cities
  };
}

export function citiesRequestAction() {
  return dispatch => {
    axios.get(GET_CITIES_URL).then(response => {
      dispatch(citiesRequest(response.data.cities));
    });
  };
}

1 Ответ

0 голосов
/ 13 сентября 2018

Итак, проблема была в citiesRequestReducer. Вместо возврата {...state, cities: action.payload} мне просто нужно вернуть action.payload.

...