javascript - Menyambung tindakan Redux

Saya baru dalam React, Redux dan JS secara keseluruhan. Saya ingin tahu bagaimana saya boleh menghantar tindakan selepas satu tindakan selesai - Promises dengan cara yang betul. Kod saya sebenarnya berfungsi tetapi ia terus mengeluarkan ralat:

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

Ini adalah susunan saya.

• Ini adalah pencipta tindakan saya di mana saya mahu tindakan berantai dan di mana amaran berlaku.

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

Seperti yang anda boleh lihat, masalahnya adalah dalam .then, kerana saya tidak tahu bagaimana untuk memicu tindakan dengan betul.

• Anda juga boleh melihat permintaan yang merupakan fungsi pembantu saya yang kelihatan seperti ini (di sini saya menambah token, memulangkan respons yang berbeza):

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

Soalannya ialah bagaimana saya boleh melaksanakan .then dengan betul dan apakah cara yang betul?

Jawapan #1

Jika anda ingin menghantar tindakan secara berantai, anda sebenarnya boleh melaksanakannya sendiri.

Sekarang katakan selepas menganalisis sedikit, anda mengambil pen dan kertas dan mula menulis algoritma asas tentang bagaimana ia sepatutnya berfungsi dan anda menghasilkan yang berikut:-

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

Sekarang dari atas, jika anda lihat bahawa anda membuat middleware dan terus menghantar tindakan yang mengembalikan fungsi sehingga anda mendapat tindakan yang mengembalikan objek. Inilah yang dilakukan oleh redux-thunk.

Jadi walaupun anda cuba mencipta sesuatu sendiri, lakukan itu untuk pembelajaran anda, tetapi akhirnya anda akan menghasilkan sesuatu seperti thunk atau mungkin pakej lain.

Saya benar-benar akan mengatakan cubalah redux-thunk. Juga untuk pemahaman middleware, saya akan mengesyorkan anda boleh menyemak dokumen middleware redux.