CODEWITHSUNDEEP
reactjsreact-nativereduxreact-redux
Emre
Emre

Reputation: 565

React Native Flatlist extraData not working redux data changed

I have array in redux. I am showing datas on Flatlist. However, When I edited array data , flatlist not re-render. How can i solve this problem? I checked my redux and is working fine

            this.props.notes[this.state.Index]={
                color: JSON.stringify(BgColor),
                date: this.state.fullDate.toString(),                    
                note: this.state.noteText,
                name: this.state.noteName,
                type: "note",
                noteID:this.props.notes[this.state.Index].noteID
            }
            this.props.editNotes(this.props.notes);

Flatlist code;

          <FlatList
            ref={(list) => this.myFlatList = list}           
            data={this.props.notes}
            showsVerticalScrollIndicator={false}
            renderItem={({item, index})=>(

            )}
            removeClippedSubviews={true}  
            extraData={this.props.notes}   
           />

mapStateToProps on same page with Flatlist

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

Reducer

const notes = [];

const notesReducer = (state = notes, action) => {
  switch (action.type) {
    case 'editNotes':
      return state = action.payload;
    default:
      return state
  }
};

export default notesReducer;

Upvotes: 2

Views: 4687

Answers (3)

Milind Agrawal
Milind Agrawal

Reputation: 2934

You can fix the issue in many ways but the wrong part I see in your code is Reducer. As per the standard, your reducer should be a Pure Function and the state should not mutate.

const notes = [];

const notesReducer = (state = notes, action) => {
  switch (action.type) {
    case 'editNotes':
      return {
        ...state,
        ...action.payload;
    },
    default:
      return state
  }
};

export default notesReducer;

This should resolve your issue.

Suggestion: Try to create a nested hierarchy in redux like

const initialState = {
 notes: [],
};

const notesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'editNotes':
      return {
        ...state,
        notes: [
          ...state.notes,
          ...action.payload.notes,
        ],
    },
    default:
      return state
  }
};

export default notesReducer;

Upvotes: 1

kreysix
kreysix

Reputation: 359

The reason it's not updating is because you're not returning a new array. The reference is same.

Return the updated state like return [...state,action.payload]

Upvotes: 2

Daniel Zheng
Daniel Zheng

Reputation: 312

The reason it's not updating the data correctly is because the mutation.

The problematic code is this part.

            this.props.notes[this.state.Index]={
                color: JSON.stringify(BgColor),
                date: this.state.fullDate.toString(),                    
                note: this.state.noteText,
                name: this.state.noteName,
                type: "note",
                noteID:this.props.notes[this.state.Index].noteID
            }
            this.props.editNotes(this.props.notes);

It should be in this way

const { notes, editNotes } = this.props; 
const newNotes = [...notes];
const { index } = this.state;
newNotes[index] = {
  //update data
} 
editNotes(newNotes);

Upvotes: 1

Related Questions