Question

我正在尝试在化简器中更新redux状态。即使组件通过“连接”调用连接，更新后的状态也不会显示在组件中。

这是化简代码-

const INIT_STATE={fullData:[]}

export default createTaskReducer=(state=INIT_STATE,action)=>{
//console.log('from reducer')
switch(action.type)
{
case "createTask":fullData=state.fullData;fullData.push(action.payload);
return {...state,fullData}

case "delete":console.log("about to delete");
let allData=state.fullData.filter((value,index,arr)=>{return 
value.id!==action.payload});

state.fullData=allData;
console.log(state);
return {...state};

default: return {...state}
}

}

如您在上述化简器中所看到的，在“删除”中，我试图从状态中删除一些条目，使用修改后的数据更新状态，然后创建具有相同详细信息的新状态对象。

这是我的联合减速机-

export default combineReducers({
initial:dataList,
fullData:createTaskReducer,
latestId:generateId
})

在调用reducer之后，由于状态已更改，redux将调用以下组件。但是，我没有得到状态'fullData'属性的更新值-

      class TaskList extends React.Component{

        constructor(props)
        {
            super(props);
        }

        renderListItem(singleItem)
        {
          //console.log(singleItem);
         return <Task title={singleItem.item.title}  desc={singleItem.item.desc} 
        dueDate= {singleItem.item.dueDate} id={singleItem.item.id}/>
        }
        componentWillMount()
        {
            if(this.props.init)
            {this.props.loadInitialData();}
        }

        render()
        {    

           if (this.props.init)
           {this.props.fullData.fullData=this.props.initial.initialData}
            console.log('printing...')

//NOT GETTING THE UPDATED STATE HERE !!
            console.log(this.props);

let renderList=this.props.init?       
        this.props.initial.initialData:this.props.fullData.fullData;


      let list=(renderList.length==0?(<View></View>):<FlatList data={renderList}  renderItem={this.renderListItem} 
        keyExtractor={val=>val.id.toString()}></FlatList>);  



            return (
        <View style={taskListStyle.containerStyle}>
       {list}
        <CustomButton title='+'  onPressHandler={()=>{Actions.createTask()}} 
        type='round' 
        styleVal={{position:'absolute',bottom:0,alignSelf:'flex-end'}}/>
           </View>
                )
            }

            }
        const mapStateToProps=(state)=>{
            return state;}

        const taskListStyle=StyleSheet.create({
        containerStyle:{flex:1}})

         TaskList.defaultProps={init:false}
        export default connect(mapStateToProps,{loadInitialData})(TaskList)

Answer 1

您的代码几乎不可读。提出问题时，请清理干净（缩进等）。

可能还存在其他一些问题（是故意使用双.fullData.fullData吗？），但是一个大问题是，您正在改变应该是不可变的Redux状态。例如。这个：

state.fullData=allData;
console.log(state);
return {...state};

应如下所示：

return {...state, fullData: allData }

您可以阅读更多here。

而且您永远都不想修改道具，所以这是一个禁忌：

this.props.fullData.fullData=this.props.initial.initialData

您仅应在减速器中修改数据。我还建议使用redux-logger来调试商店数据的变化方式。

Answer 2

问题出在您的过滤器比较上：

value.id!==action.payload

您正在将id与“数据”进行比较。

尝试一下：

case "delete":
  const allData = [...state.fullData];
  return {
    ...state,
    fullData: allData.filter(value => value.id !== action.payload.id),
  };

Answer 3

发现了问题。这是因为状态值在render（）方法的第一行中被重置为初始值。

减速器中的更新状态未传播到组件

3 个答案: