React Native Redux-Toolkit - takes more time to reflect dispatch action, how to get it immideately

user_624533 0
Viewed 32

Redux-Toolkit is not updating immidiately after dispatch.

I followed : https://redux-toolkit.js.org/tutorials/quick-start

My code:

quoteSlice.js

export const quotesSlice = createSlice({
  name: 'quotes',
  initialState,
  reducers: {
    setQuotes: (state, action) => {
      console.log('before: ', current(state));
      state.quotes = action.payload;
      console.log('after: ', current(state));
    },
  },
});

slide.js

const swipeHandlerDelete = async key => {
    console.log('swipeHandlerDelete:: ' + key);
    // await deleteItem(database, key);
    const filteredQuote = await quotes.filter(i => i.id !== key);
    console.log('Before++');
    console.log('filteredQuote.quote: ' + filteredQuote[0].quote);
    console.log('quotes.quote: ' + quotes[0].quote);
    await dispatch(setQuotes(filteredQuote));
    console.log('After++');
    console.log('quotes.quote: ' + quotes[0].quote);
  };

Result: in Terminal

 LOG  swipeHandlerDelete:: 1
 LOG  Before++
 LOG  filteredQuote.quote: I'm well organized and highly productive
 LOG  quotes.quote: What is the most valuable use of my Time right now
 LOG  before:  {"quotes": [{"created_at": "2022-07-22 10:10:10", "dd": "2022-07-02", "id": 1, "quote": "What is the most valuable use of my Time right now", "status": 1, "updated_at": ""}, {"created_at": "2022-07-22 10:10:10", "dd": "2022-07-02", "id": 2, "quote": "I'm well organized and highly productive", "status": 1, "updated_at": ""}, {"created_at": "2022-07-22 10:10:10", "dd": "2022-07-02", "id": 3, "quote": "Faith can move mountains", "status": 0, "updated_at": ""}]}
 LOG  after:  {"quotes": [{"created_at": "2022-07-22 10:10:10", "dd": "2022-07-02", "id": 2, "quote": "I'm well organized and highly productive", "status": 1, "updated_at": ""}, {"created_at": "2022-07-22 10:10:10", "dd": "2022-07-02", "id": 3, "quote": "Faith can move mountains", "status": 0, "updated_at": ""}]}
 LOG  After++
 LOG  quotes.quote: What is the most valuable use of my Time right now

Here i'm deleting first one. i.e key=0, In this terminal result, before: and after: gets updated. But still its not changing in After++ . Why and how to do this? With this result I have to work further.

react-redux redux-toolkit react-native
1 Answers

As for now what I have done is a SIMPLE THING

HINT:- In a single function(swipe/click/or any other mobile action) update redux dispatch for only one time.

Bad code:

if(a > b){
    dispatch(setQuotes(a)); // First call
    // do some process
    var c = newFunction(x);
    // do some process
    dispatch(setQuotes(c)); // Second call
  }

Good code:

  const quotes = useSelector(state => state.quotes.quotes);
// ...
  if(a > b){
    var newQuote = quotes;
    // do all process with newQuote
    // finally
    dispatch(setQuotes(newQuote));  // NOTE: Calling only once
  }

You can do also this,

  const quotes = useSelector(state => state.quotes.quotes);
// ...
  if(a > b){
    var newQuote = quotes;
    // do all process with newQuote
    try {
      // some process
      newQuote = [a,b,c];
      dispatch(setValues(a)); // updating setValues only once
    } catch (error) {
      newQuote = [b,a,c];
      dispatch(setValues(b)); // updating setValues only once
    }
    dispatch(setQuotes(newQuote));  // NOTE: Calling only once
  }
user_6245330
Related