Question

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

这是问题

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

我需要能够像这样做

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;

我正在使用redux-thunk中间件。我也在使用AsyncStorage＆amp; redux-persist

store.js

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

额外代码：

global.counter = 0;
exports.handler = (event, context, callback) => {
    // TODO implement
    callback(null, ++global.counter);
};

Answer 1

您可以在react native中使用Promise来执行异步操作。例如：

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);
});

<强>更新对于您的情况，它将如下所示：

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 返回 resolve ：

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

} 如果发生错误，你可以使用拒绝。

Answer 2

由于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))
        });
    }
}

Redux + Persist + AsyncStorage从dispatch返回promise

2 个答案: