Question

我现在花了几天时间寻找答案，我仍然不知道自己做错了什么。我设置的其他项目与从api中获取数据的方式完全相同。所有其他答案都说明了动作如何返回对象的变化，据我所知，这是

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { createLogger } from 'redux-logger';
import Thunk from 'redux-thunk';
import reducer from './reducers/reducer';
import App from './App';

import './css/index.css';
import './css/font-awesome.css';
import './css/bulma.css';

const logger = createLogger();
const store = createStore(reducer, applyMiddleware(Thunk, logger));

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

组件调用mapDispatchToProps

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { searchRepositories } from '../actions/searchActions';

class Results extends Component {

  componentDidMount() {
    this.props.searchRepositories();
  }

  render() {
    return (
      <div>Some Stuff</div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    searchRepositories: () => {
      dispatch(searchRepositories());
    },
  };
};

const mapStateToProps = (state) => {
  return {
    repositories: state.repositories,
  };
};


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

减速机：

import * as types from '../actions/types';
import initialState from './INITIAL_STATE';


function reducer(prevState = initialState, action) {
  if (!action) return prevState;

  switch (action.type) {
    case types.FETCH_REPOS_REQUEST:
      return { ...prevState, loading: true };

    case types.FETCH_REPOS_SUCCESS:
      return {
        ...prevState,
        loading: false,
        repositories: action.data,
        error: '',
      };

    case types.FETCH_REPOS_ERROR:
      return { ...prevState, error: 'Encountered an error during GET request' };

    default:
      return prevState;
  }
}

export default reducer;

动作创作者：

import axios from 'axios';
import * as types from './types';
import { ROOT } from '../config';


export function searchRepositoriesRequest() {
  return {
    type: types.FETCH_REPOS_REQUEST,
  };
}

export function searchRepositoriesSuccess(repositories) {
  return {
    type: types.FETCH_REPOS_SUCCESS,
    data: repositories,
  };
}

export function searchRepositoriesError(error) {
  return {
    type: types.FETCH_REPOS_ERROR,
    data: error,
  };
}

export function searchRepositories() {
  return function (dispatch) {
    dispatch(searchRepositoriesRequest());
    return axios.get(`${ROOT}topic:ruby+topic:rails`).then((res) => {
      dispatch(searchRepositoriesSuccess(res.data));
    }).catch((err) => {
      dispatch(searchRepositoriesError(err));
    });
  };
}

我有这个axios api请求正在使用react this.state我只是把它放在组件中。如果有人能看到我出错的地方，它会帮助我很多。

Answer 1

好的，所以看起来我使用的是redux的早期版本，我安装的redux-thunk的版本并不喜欢！我更新到了最新版本的redux，它现在应该调用它。

我还不确定为什么安装旧版本的其他项目仍有效...

错误：操作必须是普通对象，使用自定义中间件进行异步操作

1 个答案: