操作必須是React/Redux中的普通對象？

當我通過我的動作創建者傳遞數據時，我遇到的問題是Actions must be plain objects。基本上，我試圖通過點擊一個按鈕來捕獲用戶輸入，並且基於什麼按鈕（視圖）被點擊event.target.innerHTML被傳遞給動作創建者fetchDataAsync(view)，然後該動作創建者通過axios和派送基於什麼視圖被選中。操作必須是React/Redux中的普通對象？

雖然我仍然對Redux有所瞭解，但我不確定我在這裏做錯了什麼。我已經看到了前一個行動的創建者內部進行異步操作...

組件與終極版連接：

class ViewSelector extends Component { 
    selectView(event) { 
    this.props.fetchDataAsync(event.target.innerHTML); 
    } 

    render() { 
    return (
     <nav> 
     <button onClick={this.selectView.bind(this)}>VIEW ALL</button> 
     <button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button> 
     <button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button> 
     </nav> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    view: state.view 
    }; 
} 

export default connect(mapStateToProps, actions)(ViewSelector);

行動的創建者分派基於event.target.innerHTML：

export function fetchDataAsync(view) { 
    return dispatch => { 
    dispatch(fetchData()); 

    axios.get(DATA_URL) 
    .then(res => { 
     dispatch(fetchDataSuccess(res.data)); 
     if (view == 'VIEW LAST WEEK') { 
     dispatch(lastWeekData(res.data)); 
     } else if (view == 'VIEW LAST MONTH') { 
     dispatch(lastMonthData(res.data)); 
     } 
    }).catch(err => { 
     dispatch(fetchDataFailure(err)); 
    }); 
    }; 

}

任何意見是讚賞。或者，如果您認爲有更有效的方式來捕獲用戶輸入並將其傳遞給動作創建者......我會好奇聽到更多！

來源

2016-09-26 Jose

您需要安裝redux-thunk才能使用異步操作。然後創建像這樣的商店

import thunk from 'redux-thunk'; 
const store = createStore(YOURREDUCER, applyMiddleware(thunk));

來源

2016-09-26 00:35:08 Lowkey

好吧，所以我已經實現了redux-thunk，但是如果我嘗試使用thunk運行的動作創建者有一個需要傳遞的參數呢？在這種情況下查看。我目前沒有工作：'store.dispatch（fetchDataAsync（view））;' – Jose

使用redux-thunk實現，您應該可以進行異步調用。這可能是您的代碼的其他問題。什麼是錯誤信息？您是否嘗試過調試以查看該操作是否被觸發？ – Lowkey

想通了。我已經在另一個文件中創建了'createStore'，並且忘記了它。謝謝！ – Jose

您上面的一般想法是正確的。在React組件中，您想要隔離與異步函數相關的信息並使用該信息調用動作創建者。動作創建者可以進行XHR呼叫，然後相應地分派動作。（我假設你已經安裝了中間件，否則看起來像redux-thunk開始。在這種情況下，中間件有助於連接點，確保異步操作和結果得到適當調度）。

不知道太多關於lastWeekData,lastMonthData等，我只會建議可能簡化呼叫的'然後'部分。如果有任何特殊的邏輯，它通常屬於減速器。

來源

2016-09-26 00:36:32 geoboy

操作必須是React/Redux中的普通對象？

回答

相關問題