попытался переместить мои вызовы API из App.js в файл действий

Question

• У меня есть рабочая песочница, где мой файл действий находится в app.js https://codesandbox.io/s/redux-async-actions-d92bd
• Я пытался переместить мои вызовы API из App.js в файл действий
• , нотеперь я не получаю данные в браузере.
• Я отлаживал, вкладывая консоль и проверяемую вкладку сети.
• но не повезло, подскажите, как это исправить.
• предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/redux-async-actions-b5d0t

  axios
              .get("https://reqres.in/api/users?page=2")
              // axios.get('https://jsonplaceholder.typicode.com/posts')
              .then(response => {
                // console.log("response.data.data---->", response.data.data);
                // console.log(
                //   "response.data.data[0].id---->",
                //   response.data.data[0].id
                // );
                //First of all we'll create the number of requestes base on the previous Response
                const promises = response.data.data.reduce(
                  (previousValue, { id }) => {
                    previousValue.push(
                      axios.get(
                        `https://jsonplaceholder.typicode.com/comments?postId=${id}`
                      )
                    );
                    // console.log(
                    //   " promises previousValue---->",
                    //   previousValue
                    // );

                    return previousValue;
                  },
                  []
                );

                // console.log("promises---->", promises);

                //We use the built in function to fetch the data
                axios.all(promises).then(responses => {
                  //Here you have all responses processed
                  const emailsMapped = responses.reduce(
                    (previousValue, { data }) => {
                      const emails = data.map(({ email }) => email);
                      previousValue.push(...emails);
                      // console.log(
                      //   "axios all previousValue---->",
                      //   previousValue
                      // );
                      return previousValue;
                    },
                    []
                  );
                  //You send the emails you want
                  this.props.onFetchSuccess(emailsMapped);
                  // console.log("CHECK");
                  // console.log(emailsMapped);
                });
              })
              .catch(err => {
                // this.props.onFetchError();
                // dispatchFunc({ type: "FETCH_DATA_ERROR", payload: err });
              });

Answer 1

Вы должны указать this.props в качестве параметра для функции, которую вы вызываете в actions / index.js.

Вы должны назвать это: fetchUsers(this.props)

И в файле actions / index.js fetchUsers(props) { props.onFetch(); ... props.onFetchSuccess(emailsMapped); }

Используйте этот параметр, а не this.props.

И импорт Axios с const axios = require('axios');