CODEWITHSUNDEEP
reactjsreact-nativeredux-thunk
bazi
bazi

Reputation: 1876

asyncstorage + redux thunk + redux persist, callback on dispatch

I am using redux-thunk in my react native app along with AsyncStorage & redux-persist. So naturally there is delay in changes state being taken effect after dispatching an action.

import { compose, createStore, applyMiddleware } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import thunk from 'redux-thunk';
import reducers from '../reducers';
import { AsyncStorage } from 'react-native';
import createLogger from 'redux-logger';

const logger = createLogger({
  predicate: () => process.env.NODE_ENV === 'development'
});

const middleWare = [ thunk, logger ];

const createStoreWithMiddleware = applyMiddleware(...middleWare)(createStore);

export function makeStore(onComplete :? () => void) {
  const store = autoRehydrate()(createStoreWithMiddleware)(reducers);
  persistStore(store, {
    storage: AsyncStorage
  }, onComplete);
  return store;
}

export default makeStore;

in my case

console.log(this.props.counter); // 1
this.props.dispatch(incrementCounter());
console.log(this.props.counter); // still 1 ?

so what i need to do is add a Promise like callback on the dispatch function like

this.props.dispatch(incrementCounter())
    .then(() => console.log(this.props.counter)); // 2

how can i accomplish this? i've used setTimeout but i don't think its a reliable option.

Upvotes: 1

Views: 1134

Answers (1)

user1948585
user1948585

Reputation: 180

You need to understand the basic behind flux.

Action=> Dispatch=> Store updates=> Subscribed modules are notified

In your case no timeout can work, you have to subscribe store to get notified on store update.

http://redux.js.org/docs/api/Store.html#subscribe

Upvotes: 1

Related Questions