trở lại hứa hẹn từ cửa hàng sau khi Redux thunk văn

Question

// EDITED cho rõ ràng

Tôi cố gắng để công văn chuỗi với Redux thunk

function simple_action(){ 
    return {type: "SIMPLE_ACTION"} 
} 

export function async_action(){ 
    return function(dispatch, getState){ 
    return dispatch(simple_action).then(()=>{...}); 
    } 
} 

Làm thế nào để tôi nhận được công văn để trả về một lời hứa từ các cửa hàng?

// THÊM ĐẶC BIỆT

Tôi có lẽ chỉ không hiểu một cái gì đó ở đây, nhưng trong tất cả các ví dụ với thunk-Redux, họ gọi là một sự kiện async riêng biệt (như lấy), mà rõ ràng là trả về một lời hứa. Những gì tôi đang tìm kiếm cụ thể là khi tôi gửi một hành động đến cửa hàng, làm cách nào để đảm bảo rằng cửa hàng đã xử lý hành động đó hoàn toàn trước khi bất kỳ điều gì khác xảy ra trong hàm action_creator() ở trên.

Lý tưởng nhất, tôi muốn cửa hàng trả lại một số loại lời hứa, nhưng tôi không hiểu làm thế nào hoặc nơi xảy ra?

Answer 1

Ở đây bạn có ví dụ về cách gửi và chuỗi hành động không đồng bộ. https://github.com/gaearon/redux-thunk

Phần mềm trung gian thunk biết cách biến hành động không đồng bộ thành hành động, vì vậy bạn chỉ cần có simple_action() là một đoạn và phần mềm trung gian sẽ thực hiện công việc cho bạn, nếu phần mềm trung gian nhìn thấy hành động bình thường , anh ta sẽ gửi hành động này như một hành động bình thường nhưng nếu đó là một chức năng không đồng bộ, nó sẽ biến hành động không đồng bộ của bạn thành hành động bình thường.

Vì vậy simple_action của bạn cần phải là một thunk (A thunk là một hàm trả về một hàm.) Như thế này ví dụ:

function makeASandwichWithSecretSauce(forPerson) { 
    return function (dispatch) { 
    return fetchSecretSauce().then(
     sauce => dispatch(makeASandwich(forPerson, sauce)), 
     error => dispatch(apologize('The Sandwich Shop', forPerson, error)) 
    ); 
    }; 
} 

Khi sử dụng chức năng makeASandwichWithSecretSauce bạn có thể sử dụng chức năng văn

store.dispatch(
    makeASandwichWithSecretSauce('Me') 
); 

Và thậm chí

// It even takes care to return the thunk’s return value 
// from the dispatch, so I can chain Promises as long as I return them. 

store.dispatch(
    makeASandwichWithSecretSauce('My wife') 
).then(() => { 
    console.log('Done!'); 
}); 

Dưới đây là một ví dụ hoàn chỉnh về cách bạn có thể viết người tạo hành động gửi hành động và hành động không đồng bộ từ những người tạo hành động khác và xây dựng luồng kiểm soát của bạn bằng Lời hứa.

function makeSandwichesForEverybody() { 
    return function (dispatch, getState) { 
    if (!getState().sandwiches.isShopOpen) { 
     // You don’t have to return Promises, but it’s a handy convention 
     // so the caller can always call .then() on async dispatch result. 
     return Promise.resolve(); 
    } 

    //Do this action before starting the next one below 
    dispatch(simple_action()); 

    // We can dispatch both plain object actions and other thunks, 
    // which lets us compose the asynchronous actions in a single flow. 
    return dispatch(
     makeASandwichWithSecretSauce('My Grandma') 
    ).then(() => 
     Promise.all([ 
     dispatch(makeASandwichWithSecretSauce('Me')), 
     dispatch(makeASandwichWithSecretSauce('My wife')) 
     ]) 
    ).then(() => 
     dispatch(makeASandwichWithSecretSauce('Our kids')) 
    ).then(() => 
     dispatch(getState().myMoney > 42 ? 
     withdrawMoney(42) : 
     apologize('Me', 'The Sandwich Shop') 
    ) 
    ); 
    }; 
} 
//apologize and withdrawMoney are simple action like this for example 
     return { 
     type: "END_SUCESS" 
     } 

// sử dụng

store.dispatch(
    makeSandwichesForEverybody() 
).then(() => 
    console.log("Done !"); 
); 

Để tạo bạn sở hữu hứa hẹn bạn có thể sử dụng một thư viện như bluebird.

// EDIT: Để đảm bảo rằng cửa hàng đã xử lý hoàn toàn hành động đó trước khi bất kỳ điều gì khác xảy ra trong hàm action_creator(), bạn có thể gửi đơn giản này trước action_creator(); // Tôi đã thêm nhận xét này vào mã //Do this action before starting the next one below

Answer 2

dispatch sẽ trả về bất kỳ hành động/chức năng nào mà cuộc gọi đó trả về; vì vậy nếu bạn muốn chuỗi các hoạt động nhất định (theo ví dụ của bạn), hành động của bạn sẽ cần phải trả lại Promise.

Như @Aaleks đề cập, nếu hành động của bạn là thunk, bạn có thể tạo kịch bản mà bạn trả lại Promise, sau đó bạn có thể làm như bạn đề cập.

BTW Tôi nghĩ đặt tên của bạn thunkaction_creator là một chút sai lầm, như simple_action thực sự là một hành động Đấng Tạo Hóa trong Redux cách nói - đã chỉnh sửa cho phù hợp :)