Redux操作必須是普通對象。使用自定義中間件異步操作

測試組件：

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

class Test extends Component{ 

    _add =(){ 
     this.props.add(1); 
    } 

    render(){ 
     <button onClick={this._add}>add</button> 
    } 

} 

const mapStateToProps =()=>({ 
    haha:'haha' 
}); 

export default connect(
    mapStateToProps, 
    {add} 
)(Test)

操作：

export const add = value => (dispatch) =>{ 
    dispatch({ 
     type:'ADD', 
     value:value 
    }) 
}

我，單擊Add按鈕也有這個錯誤！

這是什麼問題？

我看着createStore.js和console.log(action)。它顯示一個功能。

但是Redux的例子不是函數。我的代碼幾乎相同。

來源

2016-11-24 mqliutie

如果使用redux-thunk作爲一箇中間件，它會處理出動功能的行爲....

另一個是redux-promise將做somethink像形實轉換......但承諾

更新：

這是一個模型來處理異步

export const add = value => (dispatch) => { 
    ... do something async 
}

這樣的：

export const add = value => (dispatch) => { 
    http.get('/path') 
     .then(json => 
      dispatch({type: 'RESULT', payload: json})); 
}

你的行動沒有異步調用，因此它可以這樣寫：

export const add = value => ({ 
    type:'ADD', 
    value:value 
})

來源

2016-11-24 09:07:25

我沒有使用'redux-thunk'和'redux-promise'。 – mqliutie

這就是爲什麼REDX抱怨..要使用異步操作...您需要REDIX thunk中間件 –

是的，我導入** REDEX-thunk **它的工作原理 – mqliutie

你只是缺少箭頭=>在箭頭功能：您的行動的創建者連接到您的組件（

export const add = value => 
    ({ 
    type: 'ADD', 
    value: value 
    });

方式：

export const add = value => (dispatch) => { 
    dispatch({ 
     type:'ADD', 
     value:value 
    }) 
}

來源

2016-11-24 08:43:14

對不起，我沒有直接拷貝，我犯了一個錯誤。其實，代碼是** => ** – mqliutie

你仍然錯過了一個箭頭。爲了實現這個目標，你需要減少中間件。 –

謝謝〜讓我試試 – mqliutie

你應該寫你的行動創造者這樣將其作爲connect的第二個參數以{ add }作爲第二個參數傳遞它）允許您省略dispatch，因爲connect將自動包裝您的動作創建者i當以這種方式調用時，可以撥打dispatch。

來源

2016-11-24 08:55:20

對不起，我沒有直接複製，我犯了一個錯誤。其實，代碼是** => ** – mqliutie

Redux操作必須是普通對象。使用自定義中間件異步操作

回答

相關問題