title: How to get updated redux-toolkit state when component is not re-render
body: <p>I'm trying to delete item in redux toolkit, but don't know how, the remove function only work on screen, i have to press twice to delete the previous one</p>
  <p>Here is the reducer</p>
  <pre class="lang-js prettyprint-override"><code>const noteReducer = createSlice({
    name: &quot;note&quot;,
    initialState: NoteList,
    reducers: {
      addNote: (state, action: PayloadAction&lt;NoteI&gt;) =&gt; {
        const newNote: NoteI = {
          id: new Date(),
          header: action.payload.header,
          note: action.payload.note,
          date: new Date(),
          selectStatus: false,
        };
        state.push(newNote);
      },
      removeNote: (state, action: PayloadAction&lt;NoteI&gt;) =&gt; { // 
   ======&gt; Problem here
        return state.filter((item) =&gt; item.id !== action.payload.id);
      },
      toggleSelect: (state, action: PayloadAction&lt;NoteI&gt;) =&gt; {
        return state.map((item) =&gt; {
          if (item.id === action.payload.id) {
            return { ...item, selectStatus: !item.selectStatus };
          }
          return item;
        });
      },
      loadDefault: (state) =&gt; {
        return state.map((item) =&gt; {
          return { ...item, selectStatus: false };
        });
      },
      resetNote: (state) =&gt; {
        return (state = []);
      },
  
      editNote: (state, action: PayloadAction&lt;NoteI&gt;) =&gt; {
        return state.map((item) =&gt; {
          if (item.id === action.payload.id) {
            return {
              ...item,
              note: action.payload.note,
              header: action.payload.header,
              date: action.payload.date,
            };
          }
          return item;
        });
      },
    },
    extraReducers: (builder) =&gt; {
      builder.addCase(fetchNote.fulfilled, (state, action) =&gt; {
        state = [];
        return state.concat(action.payload);
       
      });
      
    },
  });
  </code></pre>
  <p>Here is the function where i use it:
  <strong>CODE UPDATED</strong></p>
  <pre class="lang-js prettyprint-override"><code>export default function NoteList(props: noteListI) {
    const { title, note, id, date } = props;
    const data = useSelector((state: RootState) =&gt; state.persistedReducer.note);
     useEffect(() =&gt; {
      currentDate.current = data;
    }, [data]);
    const removeSelectedNote = () =&gt; {
      dispatch(removeNote({ id: id }));
      console.log(data);  ====&gt; still log 4 if i have 4
    };
   console.log(data); // ====&gt; work if i log here but a lots of logs
  
    return (
      &lt;View&gt;
        &lt;TouchableOpacity
          onLongPress={() =&gt; {
            removeSelectedNote();
            console.log(&quot;current&quot;, currentDate.current);   ///same
          }}
          // flex
          style={CONTAINER}
          onPress={() =&gt;
            !toggleSelectedButton ? onNavDetail() : setEnableToggle()
          }
        &gt;
          &lt;Note
            note={note}
            header={title}
            date={date}
            id={id}
            selectedStatus={selectedButtonStatus}
          /&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>I have to press twice to make it work, for example, i have 4 item, when i press one, the item on screen disappears  but the data log still have 4 item, when i click another, it show 3 on console.log but the screen display 2, the redux state is change outside the <code>return()</code> but i can't capture the updated state, it work the previous one</p>
  <p>Here is a gif to show what going on</p>
  <p><a href="https://i.stack.imgur.com/VXem0.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VXem0.gif" alt="enter image description here" /></a></p>
  <p>When i press only one item, it change on UI but when i refresh it return same state</p>
  <p><a href="https://i.stack.imgur.com/tib4k.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tib4k.gif" alt="enter image description here" /></a></p>
  <p>When i click twice or more, it make changes to previous
  <a href="https://i.stack.imgur.com/dgfeU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dgfeU.gif" alt="enter image description here" /></a></p>
  <p><strong>Updated</strong></p>
  <p>The redux-persist code:</p>
  <pre class="lang-js prettyprint-override"><code>const reducer = combineReducers({
    note: noteReducer,
    firebase: authentication,
  });
  const persistConfig = {
    key: &quot;root&quot;,
    storage: AsyncStorage,
    blacklist: [],
  };
  
  const persistedReducer = persistReducer(persistConfig, reducer);
  const store = configureStore({
    reducer: { persistedReducer, toggle: toggleReducer },
    middleware: (getDefaultMiddleware) =&gt;
      getDefaultMiddleware({
        serializableCheck: false,
      }),
  });
  
  export default store;
  export type RootState = ReturnType&lt;typeof store.getState&gt;;
  export type AppDispatch = typeof store.dispatch;
  export const persistStorageNote = persistStore(store);
  </code></pre>
  <p>I also added the useEffect by this, but problem is when i log the changes in function, it remain the same:</p>
  <p><a href="https://i.stack.imgur.com/94Xs3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/94Xs3.jpg" alt="enter image description here" /></a></p>