Question

我是Redux的新手，正在尝试在我的React App中使用Redux。

这是我的减速机。

减臭剂-

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

export default combineReducers({
    dataListReducer
})

和dataList reducer-

const INITITAL_STATE={gridData:[]}

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

export default dataListReducer;

这是动作创建者类-

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无法打印最新数据？

我在这里想念什么？

请让我知道是否可以进一步澄清。

Answer 1

朋友，您尚未在reducer中定义任何内容来处理分配给它的动作。

为此，您需要像这样在减速器中设置一些案例：

print(‘\n’*80)

这样，当您的减速器被分配动作时，它就会更新。

Answer 2

您在化简器中所做的就是返回它已经具有的相同状态。因此，它是一个空洞的减少器-就像什么也不做。您需要做的是从减速器返回时，实际上要考虑在操作的有效负载中传递的内容。

case "full_data": return { ...state, action.payload }

或者我甚至建议明确指定该属性，以便可以进行进一步的扩展，并且不会覆盖任何同级

case "full_data": return { ...state, ...gridData: action.payload.gridData }

Answer 3

这应该为您工作。

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;

状态存储未在Redux中正确更新

3 个答案: