1

我的问题是为什么我在 React 项目中的 Cities 组件看不到任何道具。这里有什么问题？我也不明白为什么减速器不从 axios 异步更新状态。这里有什么问题？

这是该项目的 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();

应用程序.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;

城市.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);

cityRequestReducer.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;
  }
}

cityRequestAction.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));
    });
  };
}
4

1 回答 1

0

所以问题出在citiesRequestReducer. 而不是 return{...state, cities: action.payload}我只需要 return action.payload。

于 2018-09-13T05:14:23.793 回答