异步 redux thunk redux持续存在,派遣回调



我正在使用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

最新更新