我一直在尝试访问github API以获取特定城市中的用户列表，但是 当我在操作中访问api时，流程直接传递到reducer，而不是将数据传递给success函数。我尝试了一些解决方法，如果我要在componentDidmount中使用axios，一切都会很好。

下面是我编写的代码：

// UsersList.js

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import '../../App.css';
import {loadUsers} from '../actions/actions';

class UsersList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cityName: '',isLoading: false,eventSet: null
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        // this.searchUsers = this.searchUsers.bind(this);
    }

    handleChange(event) {
        console.log("CityName Entered ",event.target.value)
        this.setState({
            cityName: event.target.value,});
    }

    handleSubmit(event) {
        // this.setState({ isLoading: true });
        // alert('A name was submitted: ' + this.state.cityName);
        console.log(event,"jfbkbkfbk");
        this.setState({eventSet: event});
        this.props.loadUsers(this.state.cityName);
        // this.setState({ isLoading: false });
    }

    render() {
        const {users} = this.props;
        const {cityName} = this.state;
        console.log("UsersList -->>>> ",users,cityName);

        if(this.state.eventSet){console.log("888888888 ",this.state.eventSet)};
        return (
            <div classname="App">
                <form classname="App-header" >
                    <label>
                        Enter City Name:
                    <input type="text" value={cityName} onChange={this.handleChange} style={{marginLeft: 10}} />
                    </label>
                    <input type="submit" value="Submit" style={{ marginLeft: 10 }}  onClick={this.handleSubmit} />
                </form>


            </div>
        );
    }
}

const mapstatetoProps = (state) => {
    return {
        users: state.users
    };
}

// const mapDispatchToProps = (dispatch) => {
//     return {
//         actions: usersactions
//     }
// }

export default connect(mapstatetoProps,{loadUsers})(UsersList);

以下操作是文件：

// actions.js

import { LOAD_USERS_SUCCESS } from './actionTypes';
import axios from 'axios';

const baseUrl = 'https://api.github.com/search/users?q=location%3Abangalore';

export function loadUsersSuccess(users) {
    console.log('3333333',users );
    return {
        type: LOAD_USERS_SUCCESS,users
    };
}

export function loadUsers(cityName) {
    console.log("111111",cityName );
    return dispatch => {
        axios.get(`https://api.github.com/search/users?q=location%3A`,{ cityName }).then(users => {
            console.log('2222222',users );
                dispatch(loadUsersSuccess(users.data.items));
            })
            .catch(err => {
                // throw err;
                console.log('error22222',err);
            });
    }
}

// actionTypes.js

export const LOAD_USERS_SUCCESS = 'LOAD_USERS_SUCCESS';

减速器

// index.js

import { combineReducers } from 'redux';

import usersReducer from './usersReducer';
// import user from './userReducer';

const rootReducer = combineReducers({
    users: usersReducer
});

export default rootReducer;

// usersReducer.js

import {LOAD_USERS_SUCCESS} from '../actions/actionTypes';
import initialState from './initialState';

export default function usersReducer(state = initialState.users,action) {
    switch (action.type) {
        case LOAD_USERS_SUCCESS: {
            console.log('66666666',action);
            return action.users;
        }
        default:
            return state;
    }
}

商店

// store.js

import {applyMiddleware,compose,createStore} from 'redux';
import rootReducer from '../reducers';
import ReduxThunk from 'redux-thunk';

let store = compose(applyMiddleware(ReduxThunk))(createStore)(rootReducer);

export default store;

// App.js

import React,{ Component } from 'react';
// import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
// import { loadRepos } from './actions/reposaction';
import UsersList from './screens/UsersList';

class App extends Component {

    render() {
        return (
            <Provider store={store}>
                <UsersList />
            </Provider>
        )
    }
}

export default App;

// Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './source/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />,document.getElementById('root'));

serviceWorker.unregister();

我已经为React-native应用程序尝试了相同的代码，并且一切正常，但是我无法理解为什么ReactJs应用程序会发生这种情况，因为在两种情况下，redux都是相同的。强调文本