還原店的狀態未更新

我正在使用MERN堆棧計算器，但我的客戶端和服務器是不同的項目。 React App在3030上運行，Node Backend在3000上運行。我能夠從Node後端檢索正確的響應，但無法將其更新到商店，主要是由於'狀態'或返回數據範圍的問題。下面是我的代碼片段：還原店的狀態未更新

const calcReducer = (state = calcState, action) => {  
    switch(action.type){ 
    case 'ADD_ELEM':     
      return { 
       ...state,        
       value: state.value == 0 ? action.text : state.value + action.text 
      }  
    case 'CLEAR': 
     return{ 
      ...state, 
      value: 0 
     } 
    case 'EQUAL': 

    const url = 'http://localhost:3000/calculate';     
    superagent 
    .post(url) 
    .send({ exp : state.value })   
    .set('Accept', 'application/json') 
    .end((err,data) => { 
     if (err) 
      return state; 
     else {     
       console.log(state); //prints the old value of the state 
       //below prints the correct state value but returning the state from here doesn't work 
       console.log({ 
       ...state, 
       value : Number(JSON.parse(data.text).result) 
       })          
     } 
     }) 
     return { 
     ...state, 
     value : VALUE // how can the value be brought here from inside of else loop 
     } 

    default: 
     return state; 
} 
}

內「其他」正常打印的console.log語句，但沒有效果，如果我從那裏返回狀態值。我目前正在返回「狀態」的地方對我來說並不適合，返回的狀態與控制進入該狀態之前的狀態完全相同。有人可以解釋我如何使用示波器，因爲我是ES6新手？

EDIT1：

當我嘗試採取「異步岬」出來的減速，使變化如下：

const mapStateToProps = (state) => { 
    return{ 
     value: state.value, 
     btns: state.btns 
    } 
} 
const mapDispatchToProps = (dispatch) => { 
    return{ 

    addElem: (text) => { 

    dispatch({ 
    type: 'ADD_ELEM', 
    text 
    }) 
}, 

clear:() => { 
    dispatch({ 
    type: 'CLEAR' 
    }) 
}, 

equal: (value) => { 
console.log(value) 
superagent 
.post('http://localhost:3000/calculate') 
.send({ exp : value })   
.set('Accept', 'application/json')) 
.end((err,data) => {    
     dispatch({ type: 'EQUAL', JSON.parse(data.text).result })         
     }) 
    } 
    } 
}

在這種情況下，代碼生成失敗說：模塊構建失敗：SyntaxError：意外的令牌（74：2）

72 | 
    73 | const mapStateToProps = (state) => { 
> 74 | return{ 
     | ^
    75 |  value: state.value, 
    76 |  btns: state.btns 
    77 | }

來源

2017-10-07 Akshay M

您正在嘗試在縮減器內部執行一些帶有副作用的異步操作。這與需要完成的事情完全相反。我建議你在使用之前閱讀文檔http://redux.js.org/ – Freez

我可以理解，這可能不是最好的方法，我現在正在通過redux教程和文檔，但我想知道這是否真的是範圍問題，並且是否可以使用跨越這種情況下'case語句'範圍的變量輕鬆解決？ –

沒問題，問題是：你的reducer是同步的，它需要一個狀態，一個動作，並且必須立即返回新的狀態。這不僅僅是一個範圍問題，而是一個時間問題，你的回調函數'.end（（err，data）=>'將在你的reducer的'return'後面執行很長時間。你的reducer 'superAgent.post（）。end（value => store.dispatch（{type：EQUAL，value}）'，看看http://redux.js.org/docs/advanced/AsyncFlow .html – Freez

，我們在您mapDispatchToProps語法錯誤，儘量以及縮進你的代碼，因此會更容易識別它們。

const mapDispatchToProps = (dispatch) => { 
    return {  
    addElem: (text) => { 
     dispatch({ 
     type: 'ADD_ELEM', 
     text 
     }) 
    }, 
    clear:() => { 
     dispatch({ 
     type: 'CLEAR' 
     }) 
    }, 
    equal: (value) => { 
     console.log(value) 
     superagent 
     .post('http://localhost:3000/calculate') 
     .send({ exp : value })   
     .set('Accept', 'application/json') 
     .end((err,data) => {    
     dispatch({ type: EQUAL, result: JSON.parse(data.text).result }) 
     }) 
    } 
    }; 
};

來源

2017-10-07 09:44:29 Freez

-1

return語句位於回調函數中。所以，你只是從回調函數返回。你可能應該把它包裝在Promise中，如下所示。

return new Promise((resolve, reject) => { 
    superagent(...) 
    ... 
    .end((err, data) => { 
    if (err) 
     reject(state); 
    else {     
     resolve({ 
     ...state, 
     value : Number(JSON.parse(data.text).result) 
     });          
    } 
    }); 
});

來源

2017-10-07 08:34:19 vijayst

作者已編輯該問題，使我的答案部分無關緊要！原始問題試圖從回調中返回。 – vijayst

還原店的狀態未更新

回答

相關問題