Обновление состояния в редукторе не распространяется на компонент - PullRequest
Новая
       6

Обновление состояния в редукторе не распространяется на компонент

0 голосов
/ 14 февраля 2019

Я пытаюсь обновить состояние редуктора в редукторе.Обновленное состояние не отображается в компоненте, даже если компонент подключен с помощью вызова «connect».

Вот код редуктора - 

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}
}

}

Как вы можете видеть ввышеупомянутый редуктор, в «delete» я пытаюсь удалить некоторые записи из состояния, обновляя состояние с измененными данными, затем создавая новый объект состояния с теми же деталями.

Вот мои комбинаторные преобразователи -

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

После вызова редуктора, следующий компонент вызывается из-за изменения состояния.Однако я не получаю обновленное значение свойства '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)

Ответы [ 3 ]

0 голосов
/ 14 февраля 2019

Проблема с вашим фильтром сравнения: 

value.id!==action.payload

Вы сравниваете id с «данными».

Попробуйте это: 

case "delete":
  const allData = [...state.fullData];
  return {
    ...state,
    fullData: allData.filter(value => value.id !== action.payload.id),
  };
0 голосов
/ 14 февраля 2019

Нашел проблему.Это произошло потому, что значение состояния сбрасывалось до начального значения в первой строке метода render ().

0 голосов
/ 14 февраля 2019

Ваш код едва читаемый.Пожалуйста, очистите его (отступы и т. Д.), Когда задаете вопрос.

Могут быть и другие проблемы (намеренно двойные .fullData.fullData?), Но одна большая проблема заключается в том, что вы изменяете состояние Redux, которое должно быть неизменным.Например: 

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

должно выглядеть так: 

return {...state, fullData: allData }

Вы можете прочитать подробнее здесь .

Также вы никогда не захотите изменятьреквизиты, так что это нет-нет: 

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

Вы должны изменять данные только в своем редукторе.Я также рекомендую использовать redux-logger для отладки изменений данных вашего магазина.

...