جافاسكريبت - ربط إجراءات Redux

أنا جديد على React و Redux و JS بشكل عام. أريد أن أعرف كيف يمكنني إرسال إجراء بعد انتهاء الآخر - الوعود بطريقة صحيحة. الكود الخاص بي يعمل في الواقع ولكنه يواصل إظهار خطأ:

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

هذا هو إعدادي.

• هذا هو منشئ الإجراء الخاص بي، ما أريده هو إجراء متسلسل وأين يحدث التحذير.

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

كما ترى المشكلة في .then، لأنني لا أعرف كيفية تفعيل الإجراء بشكل صحيح.

• يمكنك أيضًا رؤية الطلب الذي هو دالة المساعدة الخاصة بي والتي تبدو هكذا (هنا أضيف الرمز المميز، وأعيد ردودًا مختلفة):

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

السؤال هو كيف يمكنني تنفيذ .then بشكل صحيح وما هي الطريقة الصحيحة؟

الإجابة رقم 1

إذا كنت تريد تنفيذ الإجراءات على التوالي، يمكنك فعليًا تنفيذ ذلك بنفسك.

الآن بعد التحليل قليلاً، تأخذ قلمًا وورقة وتبدأ في كتابة خوارزمية أساسية لكيفية عملها، وتتوصل إلى ما يلي:-

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

الآن من الأعلى، إذا رأيت أنك تنشئ وسيطًا وتستمر في إرسال الإجراءات التي تُرجع دوال حتى تحصل على إجراء يُرجع كائنًا. هذا ما يفعله redux-thunk.

لذلك حتى إذا حاولت أن تبتكر شيئًا من نفسك، افعل ذلك من أجل تعلمك، لكن في النهاية ستتوصل إلى شيء مثل thunk أو ربما بعض الحزم الأخرى.

سأقول حقًا جرب redux-thunk. أيضًا لفهم الـ middleware أوصي بأن تتحقق من مستندات الـ redux middleware.