Redux not update nasted state

Question

I have an array and i'm dispatching LIKE_POST action from child component. Redux state updated but view not updating. I'm using Flatlist. And using extradata. (Working ADD_POST and DELETE_POST actions)

action.payload returning liked post id,

In reducer:

    const initialState = {
        feedData: [],
        loading: false,
    };
...
//FETCH FEED
...
    case LIKE_POST:
                return {
                    ...state,
                    feedData: [
                        ...state.feedData.map((post) => {
                            if (post.id === action.payload) {
                                return {
                                    ...post,
                                    like: {
                                        count: 1,
                                        isLiked: true,
                                    },
                                };
                            }
                            return post;
                        }),
                    ],
                };

Logger is returning like:1 and isLiked:true but view not updated.

Let's see the selector (or useSelector or connect) call you are using here as well. Also, in general you probably should follow the official recommendation to use redux toolkit instead of writing plain redux logic by hand, as in RTK reducers you can use mutating logic. Your code in that case would become const found = state.feedData.find(post => post.id === action.payload); if (found) { found.like = {count: 1, isLiked: true } } — phry

Serhan Özcan Serhan Özcan · Accepted Answer · 2021-01-10T17:25:30

I solved the problem.

I'm using useState hook in the component for feedData. When i remove useState and directly using stored data. It's worked.

const feedData = useSelector(state=>state.feed.feedData)
const [data, setData] = useState(feedData) => THIS IS THE MISTAKE

Redux not update nasted state

1 Answers