javascript - Redux eylemlerini zincirleme

React, Redux ve genel olarak JS konusunda yeniyim. Bir işlemi tamamlandıktan sonra başka bir işlemi nasıl dispatch edebileceğimi bilmek istiyorum - Promiseleri doğru şekilde. Kodum aslında çalışıyor ama sürekli şu hatayı veriyor:

readingActions.js?14b9:56 Uncaught (in promise) TypeError: dispatch(...).then is not a function(…)

Bu benim kurulumum.

• Bu benim aksiyon oluşturucum, zincirlenmiş aksiyon ve uyarının gerçekleştiği yeri istiyorum.

  export function createReading(reading) {
    return function (dispatch) {
      dispatch({type: CREATE_READING});
      return request(
        `${API_URL}new`, {method: 'POST', body:JSON.stringify(reading)},
        (json) => {( dispatch({type: CREATE_READING_SUCCESS, res: json}).then(dispatch(Notifications.success(showSuccess(json.book.title)))))},
        (json) => { dispatch({type: CREATE_READING_ERROR400, res: json}).then(dispatch(Notifications.error(showError(json.error)))) },
        (res) => { dispatch({type: CREATE_READING_ERROR500, res: res}) },
        (ex) => { dispatch({type: CREATE_READING_FAILURE, error: ex}) },
      )
    }
  }
  

Gördüğünüz gibi sorun .then içinde, çünkü eylemi doğru şekilde nasıl tetikleyeceğimi bilmiyorum.

• Ayrıca isteği de görebilirsiniz; bu, benim yardımcı fonksiyonum ve şöyle görünüyor (burada token ekliyorum, farklı yanıtlar döndürüyorum):

  export function request(url, options, success, error400, error, failure) {
      let headers = new Headers();
      headers.append("Content-Type", "application/json")
      headers.append("Accept", "application/json")
      options["headers"] = headers;
  
       if (localStorage.jwtToken) {
          let token = localStorage.jwtToken;
          headers.append('Authorization', 'JWT '+token);
       }
  
      return fetch(url, options)
          .then(res => {
              if (res.status >= 200 && res.status < 300) {
                  res.json().then(json => {
                       return success(json)
                  })
              } else if (res.status === 400) {
                  res.json().then(json => {
                      return error400(json)
                  })
              } else {
                  return error(res)
              }
          }).catch((ex) => {
              return failure(ex)
          })
  }
  

Soru şu: .then metodunu doğru şekilde nasıl çalıştırabilirim ve doğru yol ne olur?

Cevap #1

Eğer eylemleri zincirler halinde göndermek istiyorsanız, bunu aslında kendiniz uygulayabilirsiniz.

Şimdi biraz analiz ettikten sonra bir kalem ve kağıt alıp bunun nasıl çalışması gerektiğine dair temel bir algoritma yazmaya başladığınızı ve şu şekilde bir sonuca vardığınızı söyleyin:-

dispatch(action) => action returns function => action returns function => action returns an object(here you chain ends)

Şimdi yukarıdan bakarsanız, bir ara katman (middleware) oluşturduğunuzu ve bir nesne döndüren bir eylem alana kadar fonksiyon döndüren eylemleri göndermeye devam ettiğinizi görüyorsunuz. Redux-thunk bunu yapar.

Yani kendi başınıza bir şey yaratmaya çalışsanız bile bunu öğrenmeniz için yapın, ama sonunda thunk gibi ya da belki başka bir paketle karşılaşacaksınız.

Gerçekten redux-thunk'u denemenizi tavsiye ederim. Ayrıca middleware konusunu anlamak için redux middleware belgelerini inceleyebileceğinizi öneririm.