Question

我是React Native的新手，我无法弄清楚我犯错误的地方。即在我的React Native应用程序中，当我正在进行异步函数调用时，我正在

减少者可能不会发送行动

错误。

这是我正在进行通话的组件

 componentDidMount(){
       this.initializeOverview().done();
  } 

   async initializeOverview() {
        await this.props.getExpensesSum();
    }

但是，如果我在getExpensesSum（）中没有dispatch（getExpensesSumRequest（））调用相同的函数，那么everithing正常工作。我调用getExpensesSumRequest（）的原因是因为我想在等待数据时显示加载指示符。

让我更加困惑的是**当我点击按钮点击getExpensesSum（）时它正在工作**

这是我的动作函数，它调用REST API，内部是有问题的getExpensesSumRequest（）函数。

export function getExpensesSum() {
    return (dispatch) => {

        **dispatch(getExpensesSumRequest())**

        return fetch(URL + "/api/expenses/sum/", {
                method: "GET",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(response => response.json().then(json => ({
                json,
                response
            })))
            .then(({
                json,
                response
            }) => {
                if (response.ok === false) {    
                    return Promise.reject(response, json)
                }
                return json
            })
            .then(
                // success
                data => {
                    dispatch(getExpensesSumSuccess(data));
                },
                // failure
                (data) => dispatch(getExpensesSumFailure(data.status || 'Something failed'))
            ).catch((error) => console.warn("fetch error:", error))
    }
}

调度方法

export function getExpensesSumSuccess(expSum) {
    return {
        type: GET_EXPENSESSUM_SUCCESS,
        expSum
    }
}
export function getExpensesSumRequest() {
    return {
        type: GET_EXPENSESSUM_REQUEST,
    }
}
export function getExpensesSumFailure(error) {
    return {
        type: GET_EXPENSESSUM_FAILURE,
        error
    }
}

这是我的减速机

import {
 GET_EXPENSESSUM_REQUEST,
 GET_EXPENSESSUM_SUCCESS,
 GET_EXPENSESSUM_FAILURE
} from '../actions/overview'

function expensesSum(state = {
  loadingExpensesSum: false, 
   expensesSum: {'Sum':0}   
}, action) {
  switch(action.type) {
    case GET_EXPENSESSUM_REQUEST:
      return {
        loadingExpensesSum: true, // Show a loading indicator.
        expensesSum:{'Sum':0}
      }
    case GET_EXPENSESSUM_FAILURE:
      return {
        loadingExpensesSum: false,
        error: action.error
      }
    case GET_EXPENSESSUM_SUCCESS:
      return {
        loadingExpensesSum: false,
        expensesSum: action.expSum,
      }
    default:
      return state
  }
}

export default expensesSum

我正在使用react-redux将我的行动绑定到我的调度员：

function mapDispatchToProps(dispatch) {
    return {
    getExpensesSum: () => dispatch(getExpensesSum()),

  };
}

function mapStateToProps(state) {
  return {
    name: state.user.name,
    expensesSum:state.expensesSum.Sum,

  };
}

非常感谢任何帮助。

P.S。这是堆栈跟踪

log

device stack trace

Answer 1

我的问题是在触发异步eventListener后使用调度。

bindActionCreators解释的方法here没有帮助。

不知何故，redux后端在一点点之后就无法识别调度actor。这可以解决错误。在actions.js：

const SET_SOMETHING='SET_SOMETHING'

export const doSomething = () => {
  return {
    type:SET_SOMETHING
  }
}

使用动作的组件：

import { doSomething } from './actions.js'

class Foo extends React.Component { 
  componentDidMount() {

    const fn = ()=>{
      // this gives the error --> this.props.do()

      // this works
      setTimeout(()=>{this.props.do()},100)
    }
    document.addEventListener( 'event', fn )
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {  
  return {
    do: id => {
      dispatch(doSomething())
    }
}

...

React Native＆＃34; Reducers可能不会发送行动＆＃34;从componentDidMount（）中调用异步函数时

1 个答案: