Redux store is updated but view is not

Question

I have the parent Posts.js component which map every object in posts array. In this function I try to filter all notes have same post_id as id of the current mapped post object. All stored in filteredNotes variable. Then I pass it to each child. Now the issue. When I want to add new note in specific post, the view doesn't update (new note was not added to the list) although the database and redux store has been updated successfully. But when I try to remove that filter function, everything works just fine so I guess the main problem is there. Any idea how to fix this? Thanks

Posts.js

  const posts = useSelector((state) => state.post.posts);
  const notes = useSelector((state) => state.notes.notes);

  useEffect(() => {
    dispatch(getPosts());
    dispatch(getNotes());
  }, []);

  const addNoteHandle = (val) => {
    dispatch(addNote({new_note: val}));
  }

  return (
    <div className="post__page">
      <div className="post__list">
        {posts.map((data) => {
          let filteredNotes = notes.filter((i) => i.post_id === data.id);
          return <Post data={data} notes={filteredNotes} />;
        })}
      </div>
      <PostForm addNewNote={addNoteHandle} />
   </div>
  );

Post.js

export const Post = ({ data, notes }) => {
  return (
    <div className="post__item">
      <div className="post__title">{data.title}</div>
      <div className="post__note">
        {notes.map(note => <div>{note.text}</div>)}
      </div>
    </div>
  );
};

NoteForm.js

const NoteForm = ({ addNewNote }) => {
  const [text, setText] = useState("");

  return (
    <div>
      <Input value={text} onChange={(e) => setText(e.target.value)} />
      <Button type="primary" onClick={() => addNewNote(text)} >
        <SendOutlined />
      </Button>
    </div>
  );
};

Action

 export const addNote = ({ new_note }) => async (dispatch) => {
    try {
      const res = await axios.post("http://localhost:9000/api/note", new_note);
      dispatch({ type: ADD_NOTE, payload: res.data });
    } catch (err) {
      dispatch({ type: NOTE_FAIL });
    }
 };

Reducer

case ADD_NOTE:
   return {
     ...state,
     notes: [...state.notes, payload]
   };

Answer 1

use useSelector to get the component value from redux store. for some reason hook setText will not work to update the page component. I had a similar problem and could not find any solution. This code may help:

let text ='';
text = useSelector((state) => 
    state.yourReducer.text);

Now show your text wherever you want this will fix the issue until you find real solution