質問編集履歴

微修正

2020/06/04 03:46

投稿

takada.m

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -318,9 +318,11 @@
   failedFetch,
-  REFETCH,
+  REQUEST_REFETCH,
+  succeedReFetch,
-  reFetch,
+  failedReFetch,
 } from './action';
@@ -448,9 +450,9 @@
 ```
-export const reFetch = (results) => ({
+export const succeedReFetch = (results) => ({
-  type: REFETCH,
+  type: SUCCESS_REFETCH,
   response: results,
@@ -460,9 +462,9 @@
 ```
-export const reFetch = (results) => ({
+export const succeedReFetch = (results) => ({
-  type: REFETCH,
+  type: SUCCESS_REFETCH,
   response: [results],
@@ -476,7 +478,7 @@
 ```
-    case REFETCH:
+    case SUCCESS_REFETCH:
       return {
@@ -492,7 +494,7 @@
 ```
-    case REFETCH:
+    case SUCCESS_REFETCH:
       return Object.assign({}, state, {
@@ -506,7 +508,7 @@
 ```
-    case REFETCH:
+    case SUCCESS_REFETCH:
       return {

指摘をいただいたため、修正

2020/06/04 03:46

投稿

takada.m

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -74,7 +74,11 @@
 export const FAILED_FETCH = 'FAILED_FETCH';
+export const REQUEST_REFETCH = 'REQUEST_REFETCH';
+export const SUCCESS_REFETCH = 'SUCCESS_REFETCH';
-export const REFETCH = 'REFETCH';
+export const FAILED_REFETCH = 'FAILED_REFETCH';
@@ -112,103 +116,365 @@
+// 再レンダーAPI
+export const requestReFetch = (results) => ({
+  type: REQUEST_REFETCH,
+});
+// 再レンダーAPI成功
+export const succeedReFetch = (results) => ({
+  type: SUCCESS_REFETCH,
+  results,
+});
+// 再レンダーエラー
+export const failedReFetch = (results) => ({
+  type: FAILED_REFETCH,
+  results,
+});
+```
+reducer.js
+```
+import {
+  REQUEST_FETCH,
+  SUCCESS_FETCH,
+  FAILED_FETCH,
+  REQUEST_REFETCH,
+  SUCCESS_REFETCH,
+  FAILED_REFETCH,
+} from './action';
+const initialState = {
+  isFetching: true,
+  isError: false,
+  response: {},
+};
+const Reducer = (state = initialState, action) => {
+  switch (action.type) {
+    // API
+    case REQUEST_FETCH:
+      return {
+        ...state,
+      };
+    // API成功
+    case SUCCESS_FETCH:
+      return {
+        ...state,
+        isFetching: false,
+        isError: false,
+　　　　　response: action.response,
+      };
+    // APIエラー
+    case FAILED_FETCH:
+      return {
+        ...state,
+        isFetching: false,
+        isError: true,
+        response: action.error,
+      };
+    // 再レンダーAPI
+    case REQUEST_REFETCH:
+      return {
+        ...state,
+      };
+    // 再レンダーAPI成功
+    case SUCCESS_REFETCH:
+      return {
+        ...state,
+        isFetching: false,
+        // *** 問題のコード ***
+        response: [...state.response, action.results],
+　　　　　// 以下も試しましたが、同じくエラー
+        // response: state.response.concat(action.results),
+      };
+    // 再レンダーAPIエラー
+    case FAILED_REFETCH:
+      return {
+        ...state,
+        isFetching: false,
+        isError: true,
+        response: action.reError,
+      };
+    default:
+      return state;
+  }
+};
+```
+一応saga.jsも記載します。
+```
+import Api from './api';
+import { call, put, takeEvery } from 'redux-saga/effects';
+import {
+  REQUEST_FETCH,
+  succeedFetch,
+  failedFetch,
+  REFETCH,
+  reFetch,
+} from './action';
+// API操作
+function* fetchData() {
+  const { response, error } = yield call(Api);
+  if (response) {
+    yield put(succeedFetch(response));
+  } else {
+    yield put(failedFetch(error));
+  }
+}
 // 再レンダー
+function* reFetchData() {
+  const { results, reError } = yield call(Api);
+  if (results) {
+    yield put(succeedReFetch(results));
+  } else {
+    yield put(failedReFetch(reError));
+  }
+}
+const mySaga = [
+  takeEvery(REQUEST_FETCH, fetchData),
+  takeEvery(REQUEST_REFETCH, reFetchData),
+];
+export default mySaga;
+```
+理屈的にも、
+記載方法としても間違っていないように見えるのですが、
+以下のエラーが出てしまいます。
+### 発生している問題・エラーメッセージ
+スプレッドで記載の場合
+```
+TypeError: state.response is not iterable
+```
+concatで記載の場合
+```
+TypeError: state.response.concat is not a function
+```
+### 該当のソースコード
+reducer.js
+```
+response: [...state.response, action.results],
+```
+```
+response: state.response.concat(action.results),
+```
+色々書き方を変えて試してみましたが、
+エラーがなくならないか、違う結果になってしまいます。
+### 試したこと
+- actionでの受け取り方を変える
+```
 export const reFetch = (results) => ({
   type: REFETCH,
-  results,
+  response: results,
-});
+});
-```
+```
-reducer.js
-```
+```
-import {
+export const reFetch = (results) => ({
-  REQUEST_FETCH,
-  SUCCESS_FETCH,
-  FAILED_FETCH,
-  REFETCH,
+  type: REFETCH,
-} from './action';
-const initialState = {
-  isFetching: true,
-  isError: false,
-  response: {},
+  response: [results],
-};
+});
-const Reducer = (state = initialState, action) => {
-  switch (action.type) {
-    // API
-    case REQUEST_FETCH:
-      return {
-        ...state,
-      };
+```
-    // API成功
-    case SUCCESS_FETCH:
-      return {
-        ...state,
-        isFetching: false,
+- reducerでの受け取り方を変える
-        isError: false,
-　　　　　response: action.response,
-      };
+```
-    // APIエラー
-    case FAILED_FETCH:
-      return {
-        ...state,
-        isFetching: false,
-        isError: true,
-        response: action.error,
-      };
-    // 再レンダー
     case REFETCH:
@@ -216,205 +482,27 @@
         ...state,
+        response: {...state.response, action.results},
+        // response: state.response.concat([action.results]),
+      };
+```
+```
+    case REFETCH:
-        // *** 問題のコード ***
+      return Object.assign({}, state, {
         response: [...state.response, action.results],
-　　　　　// 以下も試しましたが、同じくエラー
-        // response: state.response.concat(action.results),
-      };
+      });
-    default:
-      return state;
-  }
-};
-```
+```
-一応saga.jsも記載します。
-```
-import Api from './api';
-import { call, put, takeEvery } from 'redux-saga/effects';
-import {
-  REQUEST_FETCH,
-  succeedFetch,
-  failedFetch,
-  REFETCH,
-  reFetch,
-} from './action';
-// API操作
-function* fetchData() {
-  const { response, error } = yield call(Api);
-  if (response) {
-    yield put(succeedFetch(response));
-  } else {
-    yield put(failedFetch(error));
-  }
-}
-// 再レンダー
-function* reFetchData() {
-  const { results, error } = yield call(Api);
-  if (results) {
-    // yield put(succeedFetch(results)); タイポのため以下に修正
-    yield put(reFetch(results));
-  } else {
-    // yield put(failedFetch(error)); タイポのため以下に修正
-    yield put(failedFetch(error));
-  }
-}
-const mySaga = [
-  takeEvery(REQUEST_FETCH, fetchData),
-  takeEvery(REFETCH, reFetchData),
-];
-export default mySaga;
-```
-理屈的にも、
-記載方法としても間違っていないように見えるのですが、
-以下のエラーが出てしまいます。
-### 発生している問題・エラーメッセージ
-スプレッドで記載の場合
-```
-TypeError: state.response is not iterable
-```
-concatで記載の場合
-```
-TypeError: state.response.concat is not a function
-```
-### 該当のソースコード
-reducer.js
-```
-response: [...state.response, action.results],
-```
-```
-response: state.response.concat(action.results),
-```
-色々書き方を変えて試してみましたが、
-エラーがなくならないか、違う結果になってしまいます。
+以下は再レンダーされるが、追加ではなく、中身が丸々入れ替わってしまう。
-### 試したこと
-- actionでの受け取り方を変える
-```
-export const reFetch = (results) => ({
-  type: REFETCH,
-  response: results,
-});
-```
-```
-export const reFetch = (results) => ({
-  type: REFETCH,
-  response: [results],
-});
-```
-- reducerでの受け取り方を変える
 ```
@@ -422,42 +510,12 @@
       return {
-        ...state,
-        response: {...state.response, action.results},
+        response: action.results,
-        // response: state.response.concat([action.results]),
-      };
-```
-```
-    case REFETCH:
-      return Object.assign({}, state, {
-        response: [...state.response, action.results],
       });
 ```
-以下は再レンダーされるが、追加ではなく、中身が丸々入れ替わってしまう。
-```
-    case REFETCH:
-      return {
-        response: action.results,
-      });
-```

誤字微修正

2020/06/04 03:41

投稿

takada.m

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,7 +20,7 @@
 0. 再レンダーのためのAPIを叩く
-レスポンスはきちんと帰ってきてる
+レスポンスはきちんと返ってきてる
@@ -40,7 +40,7 @@
-※APIからのレスポンスは初期レンダーも、再レンダー時も配列がJSONの配列が返ってくる。
+※APIからのレスポンスは初期レンダー時も、再レンダー時もJSONの配列が返ってくる。
@@ -124,6 +124,8 @@
 ```
 reducer.js
 ```
@@ -236,6 +238,8 @@
 ```
 一応saga.jsも記載します。
 ```
@@ -252,7 +256,9 @@
   failedFetch,
+  REFETCH,
-  reFetch
+  reFetch,
 } from './action';
@@ -288,13 +294,13 @@
     // yield put(succeedFetch(results)); タイポのため以下に修正
-    yield put(succeedReFetch(results));
+    yield put(reFetch(results));
   } else {
     // yield put(failedFetch(error)); タイポのため以下に修正
-    yield put(failedReFetch(error));
+    yield put(failedFetch(error));
   }

タイポがあったため、saga.js内部を修正してます！

2020/06/04 00:52

投稿

takada.m

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -286,11 +286,15 @@
   if (results) {
+    // yield put(succeedFetch(results)); タイポのため以下に修正
-    yield put(succeedFetch(results));
+    yield put(succeedReFetch(results));
   } else {
+    // yield put(failedFetch(error)); タイポのため以下に修正
-    yield put(failedFetch(error));
+    yield put(failedReFetch(error));
   }