还原店的状态未更新

我正在使用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

还原店的状态未更新

回答

相关问题