Reactjs 在redux中未正确更新状态存储

我是Redux新手，正在尝试在我的React应用程序中使用Redux

这是我的减速机

减速器-

import {combineReducers} from 'redux';
import dataListReducer from './dataList';

export default combineReducers({
    dataListReducer
})

和数据列表缩减器-

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
switch(action.type){
    default: return {...state}
}
return state;
}

export default dataListReducer;

这是action creator类-

export const dataLoaded=(data)=>{
    return {
        type:'full_data',
         payload:{gridData:data}
    }
}

现在，我正在从下面的组件向网络发出一个Fetch调用，当调用返回时，我想用最新的数据更新应用程序状态-

 componentDidMount()
{
  FetchService(this.state.url)
    .then((res)=> res.json())
    .then(  (result)=>this.updateState(result)                                   
         ).catch(function(error){console.log(error)});
}


updateState(result)
{
  this.props.dataLoaded(result);  
}

组件正在按规定调用连接-

const mapStateToProps=(state)=>{  
  console.log(state);
return state;
}

export default connect(mapStateToProps,{dataLoaded})(Main) 

为什么console.log不打印最新数据

我错过了什么

---

如果我能进一步澄清，请告诉我。

朋友，您还没有在reducer中定义任何内容来处理发送给它的操作

要做到这一点，您需要在减速器中设置以下情况：

const dataListReducer=(state=INITITAL_STATE,action)=>{    
    switch(action.type){
       case "full_data":
          return {...state, myData}
       default: 
          return state
}

---

这样，当一个操作被分派到减速机时，减速机将更新。

朋友，您还没有在减速机中定义任何东西来处理分派给它的操作

要做到这一点，您需要在减速器中设置以下情况：

const dataListReducer=(state=INITITAL_STATE,action)=>{    
    switch(action.type){
       case "full_data":
          return {...state, myData}
       default: 
          return state
}

---

这样，当向减速机发送操作时，减速机将更新。

您在减速机中所做的是返回它已经具有的相同状态。所以它是一个空洞缩小器——就像不做任何动作一样。您需要做的是在从减速器返回时，实际考虑在操作的有效负载中传递的内容

案例“完整数据”：
返回{…状态，action.payload}

或者我甚至建议显式地指定属性，这样就可以进行进一步的扩展，并且不会覆盖任何同级

案例“完整数据”：
返回{…状态，…gridData:action.payload.gridData}

您在减速器中所做的是返回它已经具有的相同状态。所以它是一个空洞缩小器——就像不做任何动作一样。您需要做的是在从减速器返回时，实际考虑在操作的有效负载中传递的内容

案例“完整数据”：
返回{…状态，action.payload}

或者我甚至建议显式地指定属性，这样就可以进行进一步的扩展，并且不会覆盖任何同级

案例“完整数据”：
返回{…状态，…gridData:action.payload.gridData}

这应该适合您

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
  switch(action.type){
      case: 'full_data':
        return { ...state, gridData: action.payload.gridData }
      default: return {...state}
  }
}

export default dataListReducer;

---

这应该对你有用

const INITITAL_STATE={gridData:[]}

const dataListReducer=(state=INITITAL_STATE,action)=>{    
  switch(action.type){
      case: 'full_data':
        return { ...state, gridData: action.payload.gridData }
      default: return {...state}
  }
}

export default dataListReducer;

---

我在开关中有一个缺陷，它将状态复制到一个新对象并返回它。它应该工作正常吗？它工作正常，但它设置了与以前相同的状态--没有更新。相反，您应该在状态中设置有效负载的日期，以便可以看到实际的UI更新。它应该工作正常吗？它工作正常，但它设置了与以前相同的状态--没有更新。相反，您应该在状态中设置有效负载的日期，这样您就可以看到实际的UI更新。但是为什么这一行显示错误（解析错误：意外标记，预期“，”）在我使用操作符的示例中返回{…state，action.payload}，这是ES6的一个特性。如果您使用的是较旧的JS版本，则可以使用。但是为什么这一行显示错误（解析错误：意外标记，预期“，”）在我使用操作符的示例中返回{…state，action.payload}，这是ES6的一个特性。如果您使用的是较旧的JS版本，则可以使用。