反应 redux / 反应 thunks api答案

【问题标题】：react redux / react thunks api反应 redux / 反应 thunks api
【发布时间】：2020-03-26 14:54:31
【问题描述】：

您好，我正在尝试使用我的 api 使用 react redux 和 thunk

但没有成功

到目前为止我的代码：

我的行动：

import {FETCHING_PRODUCTS_SUCESS, FETCHING_PRODUCTS_FAIL, FETCHING_PRODUCTS_REQUEST} from '../constants/ActionsFetch';
import api from '../../services/api'

export const fetchingProductsRequest = () => ({type: FETCHING_PRODUCTS_REQUEST});

export const fetchingProductsSucess = (json) => ({
  type: FETCHING_PRODUCTS_SUCESS,
  payload: json
});

export const fetchingProductsFail = (error) => ({
  type: FETCHING_PRODUCTS_FAIL,
  payload: error
})

export const fetchProducts = () => dispatch => {
    return async dispatch => {
      dispatch (fetchingProductsRequest ());
      try {
        let response = await api.get ('/ subcategory');
        console.log (response);
        let json = await response.json ();
        dispatch (fetchingProductsSucess (json));
      } catch (error) {
        dispatch (fetchingProductsFail (error));
      }
    }
}

我的减速机：

const INITIAL_STATE = {
    isFetching: false,
    products: [],
    errorMessage: '',
};


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case FETCHING_PRODUCTS_REQUEST:
        return {... state,
                isFetching: true
                }
      case FETCHING_PRODUCTS_SUCESS:
        return {... state,
                isFetching: true,
                products: action.payload
                }
      case FETCHING_PRODUCTS_FAIL:
        return {... state,
                isFetching: false,
                errorMessage: action.payload
              }
      default:
        return state
    }
  }

我的商店：

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

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

export default store;

和我的组件：

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {fetchProducts} from '../../store/actions/ProductsFetch';
class index extends Component {

  componentDidMount () {
    this.props.fetchProducts ();
  }
  
  render () {
    console.log (this.props.Products);
    if (this.props.Products.isFetching) {
      console.log ('a');
    }
    return (
      <div>
        
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    Products: state
  };
}

export default connect (mapStateToProps, {fetchProducts}) (index);

我为我的渲染提供了一个 .log 控制台：

收到了：

{productsFetch: {…}} productsFetch: {isFetching: false, products: 数组 (0), errorMessage: ""} __ proto__: Object

通过在我的操作中提供 console.log 不要通过那部分：

返回异步调度 =>

【问题讨论】：

我更喜欢提供微软使用redux + thunk的最佳实践，这里是repo，你可以找到相关代码here
因为打字稿有点迷茫

标签： reactjs react-redux

【解决方案1】：

您的错误是您从fetchProducts 返回了太多函数。

正确的fetchProducts应该是

export const fetchProducts = () => async dispatch => {
  dispatch (fetchingProductsRequest ());
  try {
    let response = await api.get ('/ subcategory');
    console.log (response);
    let json = await response.json ();
    dispatch (fetchingProductsSucess (json));
  } catch (error) {
    dispatch (fetchingProductsFail (error));
  }
}

【讨论】：