我正在使用React Antive应用中使用Redux-thunk以及Asyncstorage&redux-persist。因此,自然会延迟派遣行动后发生变化状态。
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;
在我的情况下
console.log(this.props.counter); // 1
this.props.dispatch(incrementCounter());
console.log(this.props.counter); // still 1 ?
所以我需要做的就是添加诸如调度函数的回调之类的承诺,例如
this.props.dispatch(incrementCounter())
.then(() => console.log(this.props.counter)); // 2
我该如何完成?我已经使用了Settimeout,但我认为这不是一个可靠的选择。
您需要了解Flux背后的基本。
action => dispatch =>存储更新=>通知订阅模块
在您的情况下,没有超时可以工作,您必须订阅商店才能在商店更新中通知。
http://redux.js.org/docs/api/store.html#subscribe