Question

我正在尝试将redux与react一起使用以进行api调用以获取一些数据。在我的组件中调用该函数时，reducer看不到action.type，并且该函数返回已解决的Promise。我以前没有使用过redux-thunk。我觉得我的代码应该可以工作，但是我很难找到错误。这是代码。

Index.js

AVFoundation

动作

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunkMiddleware, devToolsEnhancer)));

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

减速器

import axios from 'axios';

export const GET_ALL_CASES = "GET_ALL_CASES";


const getCasesSuccess = (cases) => {
    return {
        type: GET_ALL_CASES,
        cases
    }
};

export const getAllCases = () => {
    return (dispatch) => {
        axios.get('https://corona.lmao.ninja/countries?sort=country')
        .then(response => {
            dispatch(getCasesSuccess(response.cases))
        })
        .catch(error => {
            throw(error)
        })
    }
}

组件

import { GET_ALL_CASES } from '../actions';

const initialState = {
    allCases: []
}

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_ALL_CASES:
            return { ...state, allCases: [...action.cases]}
        default:
            return state;
    }
}

export default rootReducer;

在调用函数时，如果将其更改为this.props.getAllCases（），则会出现此错误。

class Second extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    componentDidMount = () => {
        getAllCases()
    }


    render() { 
        return ( 
            <div>
                {this.props.data[0]}
            </div>
         );
    }
}

const mapStateToProps = (state) => (
    {
      data: state.allCases
    }
  )

  const mapDispatchToProps = dispatch => {
    return {
      getAllCases: () => dispatch(getAllCases())
    }
  }

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

Answer 1

有多种方法可以使用dipatchMapToProps或使用它的命名方式。

但是不要像我一样考虑太多，请使用最简单的方法

作为对象

false

作为功能

const dispatchToProps = {
  fun1,
  enter,
  code,
  herefun2
}

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }

使用Redux-thunk调用操作不起作用

1 个答案: