Redux Persist AsyncStorage从dispatch返回promise-Java 学习之路

我的异步操作不是http，它不使用fetch api . 那我如何回复承诺呢 . 当我发出动作时，效果不会立竿见影 . 我需要在完成操作后进行回调 . 我该怎么做呢？

这就是问题

console.log(this.props.items.length); // 5
this.props.dispatch(removeItem(1));
console.log(this.props.items.length); // 5

我需要能够像这样做

this.props.dispatch(removeItem(1))
    .then(() => this.props.dispatch(anotherAction()));

我正在使用redux-thunk中间件 . 我也在使用AsyncStorage＆redux-persist

store.js

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;

额外代码：

function removeItem(id) {
    return {
        type: 'REMOVE_ITEM',
        id
    }
}

2 回答

您可以使用Promise in react native来进行异步操作 . 例如：

let test=[0,1,2];
console.log(test.length);
let myFirstPromise = new Promise((resolve, reject) => {
  setTimeout(function(){
    test.splice(1);
    resolve(); 
  }, 250);
});

myFirstPromise.then(() => {
  console.log( test.length);
});

Update: 对于您的情况，它将如下所示：

console.log(this.props.items.length); // 5
let myFirstPromise = new Promise((resolve, reject) => {
  this.props.dispatch(removeItem(1, resolve));
});

myFirstPromise.then(() => {
  console.log(this.props.items.length); // 4
});

记得从removeItem返回解析：

function removeItem(id, callback) {
callback();
return {
    type: 'REMOVE_ITEM',
    id
 }

你可以使用reject来发生错误 .

回复于 2024-05-17T10:30:18+08:00

由于 removeItem( id ) 是一个操作，该操作将从您的数据库/ api / storage中删除该项 . 然后它必须发出另一个动作来说它已完成，如下所示：

function removeItemSuccess( id ) {
    return { type: 'ITEM_REMOVE_SUCCESS', payload: id });
}
function removeItemFail( error ) {
    return { type: 'ITEM_REMOVE_FAIL', payload: error });
}
function removeItem ( id ) {
    return (dispatch) => {
        dispatch({type: 'ITEM_REMOVE'}); // put this in an action
        return request.delete('/item/'+id).then(() => {
            dispatch( removeItemSuccess(id) );
        }).catch((err) => {
            dispatch( removeItemFail(err) );
        });
    }
}

在你的reducer中，你现在会听 ITEM_REMOVE_SUCCES 或 ITEM_REMOVE_FAIL 来改变你的状态 .

您不应该将业务逻辑放在组件中，因为这是不好的做法（即使redux-thunk允许您这样做） .

如果您需要先删除该项目的操作，然后，让我们说，删除该项目的所有者，请创建一个复合函数：

function removeItemAndOwner( itemId ) {
    return (dispatch) => {
        dispatch(removeItem(itemId))
        .then((item) => {
            return dispatch(removeOwner(item.ownerId))
        });
    }
}

回复于 2024-05-17T10:30:18+08:00

Redux Persist AsyncStorage从dispatch返回promise

2 回答

相关问题