Redux toolkit returns the previous state when you make a request for data, how do I fix this?-CodePudding

I'm in the process of making a feature to add articles to bookmarks. Now adding to bookmarks works fine, but I don't understand why redux toolkit returns previous state. When I click on the checkbox, I add an object with the article id to the bookmark array. Everything works fine in the redux toolkit, but when you try to check via console.log(), the new object doesn't appear there, but it will be there when another article is added. Each time it returns the previous value

It looks like this:

//Redux state
  
  [
    {
      id: 15
    },
    {
      id: 5
    },
    {
      id: 21
    },
    {
      id: 4
    },
    {
      id: 33
    },
    {
      id: 27
    },
    {
      id: 28
    },
    {
      id: 30
    },
    {
      id: 19
    }
  ]

//Getting the redux state in the console

[
    {
        "id": 15
    },
    {
        "id": 5
    },
    {
        "id": 21
    },
    {
        "id": 4
    },
    {
        "id": 33
    },
    {
        "id": 27
    },
    {
        "id": 28
    },
    {
        "id": 30
    }
]

Add to bookmarks code


//Slice

const initialState = {
  bookmarksData: [],
};

export const bookmarkSlice = createSlice({
  name: 'bookmark',
  
  initialState,
  
  reducers: {
    
  addBookmarks: (state, action) => {
      state.bookmarksData.push({
        id: action.payload.id,
      });
    }

  },
}); 


//Posts.jsx

  const bookmarksData = useSelector((state) => state.bookmark.bookmarksData);

  const savedBokmark = ({ id }) => {

    dispatch(addBookmarks({ id }));
    console.log(bookmarksData);

  };

Is there any way to get the current state, not the previous one? I want to send this data to the server, so that the user can save his bookmarks. I don't want to use redux thunk yet

CodePudding user response：

if you need to add side effects like interacting with a database to synonymously update both frontend and backend, try using redux saga or redux thunks.These help you handle asynchronous operations easily. https://redux-saga.js.org/

CodePudding user response：

This is not a Redux issue. The behavior you're seeing is because the savedBookmark function is a "closure" that captured the value of the selected data at the time that the React component rendered. When you dispatch(), the Redux store itself is immediately updated, but A) this component hasn't had a chance to re-render yet, and B) even when it re-renders this function instance will always point to the old data that existed at the time the function was created.

This is also true for any React component state update as well:

const [counter, setCounter] = useState(0);

const handleIncrementClick = () => {
  setCounter(counter   1);
  console.log(counter); // still the old value!
}

This is a very common point of confusion.

If you need to get the newly updated Redux store state immediately after a dispatch, then yes, the right answer here is to do that in a thunk where you have access to getState():

https://redux.js.org/usage/writing-logic-thunks#accessing-state