teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追記の追加

2020/01/30 04:33

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -194,4 +194,92 @@
194
194
  }
195
195
 
196
196
  export default HistoryReducer
197
+ ```
198
+ ## 追記
199
+
200
+ Reducerを下記の様に修正いたしました。
201
+ ```
202
+ import * as actionTypes from '../utils/actionTypes'
203
+ import * as actions from '../actions'
204
+
205
+ type Actions = (
206
+ | ReturnType<typeof actions.setHistory>
207
+ )
208
+
209
+ type History = {
210
+ date: string,
211
+ store: actions.iStore,
212
+ company: actions.iCompany,
213
+ products: actions.Product[]
214
+ }
215
+
216
+ interface iState {
217
+ histories: History[]
218
+ }
219
+
220
+ const initialState: iState = {
221
+ histories: []
222
+ }
223
+
224
+ const HistoryReducer = (state: iState = initialState, action: Actions) => {
225
+ switch (action.type) {
226
+ case actionTypes.SET_HISTORY:
227
+ return Object.assign({}, state, {
228
+ state: action.payload.histories
229
+ })
230
+ }
231
+
232
+ return state
233
+ }
234
+
235
+ export default HistoryReducer
236
+ ```
237
+ actionに記述していたinterface iProductも下記の様に修正いたしました。
238
+ ```
239
+ // 購入履歴
240
+ export interface iStore {
241
+ id: number,
242
+ image: string,
243
+ address: string
244
+ }
245
+ export interface iCompany {
246
+ id: number,
247
+ name: string
248
+ }
249
+ export type Product = {
250
+ id: number,
251
+ name: string,
252
+ price: number
253
+ }
254
+ ```
255
+ gRPCのレスポンスは以下の様に返ってきます。
256
+ ```
257
+ (4) [{…}, {…}, {…}, {…}]
258
+ 0:
259
+ date: "2020/01/29"
260
+ store: {id: 1, image: "", address: "滋賀県彦根市"}
261
+ company: {id: 1, name: "セブンイレブン"}
262
+ product:
263
+ id: 1
264
+ name: "コーラ"
265
+ price: 150
266
+ __proto__: Object
267
+ __proto__: Object
268
+ 1: {date: "2020/01/29", store: {…}, company: {…}, product: {…}}
269
+ 2: {date: "2020/01/29", store: {…}, company: {…}, product: {…}}
270
+ 3: {date: "2020/01/29", store: {…}, company: {…}, product: {…}}
271
+ length: 4
272
+ ```
273
+ 上記には記述されていませんが、case actionTypes.SET_HISTORYでreturnする前に
274
+ ```
275
+ Object.assign({}, state, {
276
+ state: action.payload.histories
277
+ })
278
+ console.log(state)
279
+ ```
280
+ をすると下記の様に表示されます。
281
+ ```
282
+ {histories: Array(0)}
283
+ histories: Array(0)
284
+ length: 0
197
285
  ```

1

タイトルの変更

2020/01/30 04:33

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 質問 タグ ユーザー 3次元配列をReducerinitialStateとして記述する。
1
+ ReduxのReducerの3次元配列の更新が上手くいきません
body CHANGED
File without changes