Reagieren nicht neu Rendern, wenn Redox Store Änderungen

Ich weiß, es gibt viele ähnliche Fragen, aber ich war nicht in der Lage, die richtige Antwort finden durch die anderen zu finden. Das Problem scheint zu sein, dass {loopToDo} nicht direkt auf eine Requisite aus dem Store verweist. Wie kann ich meinen Code so einstellen, dass er aktualisiert wird, wenn sich der Shop ändert, so wie ich es möchte?Reagieren nicht neu Rendern, wenn Redox Store Änderungen

@connect((germzFirstStore) => { 
    return { 
     taskList: germzFirstStore.tasks 
    } 
}) 

class TaskBoard extends React.Component { 

render() { 

    function toDoStatus(value) { 
     return value.taskstatus === "toDo"; 
    } 

    var toDoTasks = this.props.taskList.tasks.filter(toDoStatus); 
    var loopToDo = toDoTasks.map((tasksEntered) => { 
     return (
      <div id={tasksEntered.idtasks} className="taskBox">{tasksEntered.task}</div> 
     ); 
    }); 

    return(
     <div ref="toDo" id="toDo" className="container toDo">{loopToDo}</div> 
    ) 

    } 
}

das Reduktions:

const tasksReducer = (state=tasksInitialState, action) => { 
    if (action.type === "ADD") { 
     state = {...state, tasks: [...state.tasks, action.newTask]} 
    } 
    return state; }

Quelle

2016-11-23 germz

Nur wenn, obwohl ich bezweifle, dass es irgendetwas tut. do: return {... state,} // etc anstelle von state = {... state,} // etc – kjonsson

yeah, dasselbe Ergebnis. es ist so komisch, weil ich früher mit Code gearbeitet hatte, der mir funktional genau gleich aussieht – germz

Könntest du vielleicht [diese] (http://jsfiddle.net/guillaumemaka/jwm6k66c/) Geige verändern und dein Problem reproduzieren? Es würde ein wenig Nachforschungen erfordern, um dieses Problem zu lösen. –

Wenn germzFirstStore.tasks aktualisiert dann die Komponente wieder machen es nichts mit dem zu tun hat, was in der Funktion machen ist. Meine Vermutung ist, dass Sie den Status in Ihrem Reducer mutieren, anstatt ihn zu aktualisieren und die aktualisierte Version des Status zurückzugeben.

Quelle

2016-11-23 00:35:20 kjonsson

Reduzierer zum Beitrag hinzu – germz

Das Problem hierbei ist, dass dadurch

state = {...state, tasks: [...state.tasks, action.newTask]}

Sie effektiv den Zustand mutieren, bevor es zurückkehrt und das ist wahrscheinlich der Grund, warum Ihre Komponenten sind auf die Aktualisierung Zustand nicht wieder machen. Was Sie in Ihrem Minderer zu tun ist

if (action.type === "ADD") { 
    return {...state, tasks: [...state.tasks, action.newTask]} 
}

oder

if (action.type === "ADD") { 
    return Object.assign({}, state, {tasks: [...state.tasks, action.newTask]}) 
}

Hoffe, es hilft :)

Quelle

2016-11-23 05:25:59

Reagieren nicht neu Rendern, wenn Redox Store Änderungen

Antwort

Verwandte Themen