質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

ReduxのReducerの3次元配列の更新が上手くいきません

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

281閲覧

投稿2020/01/29 15:05

編集2020/01/30 04:33

概要

現在、TypeScript+React+Redux+Go+gRPCを用いた個人開発を行っています。
そこで、gRPCで受け取った3次元配列のレスポンスをReducerに記述したいのですが、そこで今悩んでいます。
具体的には3次元配列の値をinitialStateにコピーする方法がわかりません。通常の一次元ならば記述できますので、配列を崩してReducerを複数作ることも考えたのですが、それはどうなのかと思い今悩んでいます。
自分なりに色々工夫してみましたが、解決せず。
どなたか解決方法のご教授お願い致します。

該当するコード

ProtocolBuffers

// Protocol Buffers message ClearingHistoryRequest { string token = 1; } message ClearingHistoryResponse { bool status = 1; enums.StatusCodes status_code = 2; repeated Clearing ClearingHistory = 3; message Clearing { string date = 1; Store store = 2; Company company = 3; repeated Product products = 4; message Store { uint64 id = 1; string image = 2; string address = 3; } message Company { uint64 id = 1; string name = 2; } message Product { uint64 id = 1; string name = 2; uint32 price = 3; } } }

TypeScript

// gRPCのリクエスト /** * 購入履歴 * * @param {any} token * @return 購入履歴 */ public historyRequest = (token: any) => { return new Promise(resolve => { var ret: any const req = new ClearingHistoryRequest() req.setToken(token) const client = new WebAppServiceClient("http://localhost:8080", {}) client.clearingHistory(req, (err: any, res: any) => { if (err || res === null) { throw err } // 購入履歴の取得 const clearingHistories = res.getClearinghistoryList() // 購入商品の取得 let products: any; for (let i = 0; i < clearingHistories.length; i++) { products = clearingHistories[i].getProductsList() } // 返却値の生成 let histories = new Array(clearingHistories.length) for (let i = 0; i < clearingHistories.length; i++) { histories[i] = { date: clearingHistories[i].getDate(), store: { id: clearingHistories[i].getStore().getId(), image: clearingHistories[i].getStore().getImage(), address: clearingHistories[i].getStore().getAddress() }, company: { id: clearingHistories[i].getCompany().getId(), name: clearingHistories[i].getCompany().getName() }, product: { id: products[0].getId(), name: products[0].getName(), price: products[0].getPrice() } } } resolve(histories) }) })

TypeScript

// 購入履歴 export interface iStore { id: number, image: string, address: string } export interface iCompany { id: number, name: string } export interface iProduct { id: number, name: string, price: number } export const getHistory = (token: any) => { return async (dispatch: Dispatch<Action>) => { try { dispatch({ type: actionTypes.START_REQUEST }) const histories: any = await User.historyRequest(token) console.log(histories) dispatch(setHistory(histories)) dispatch({ type: actionTypes.COMPLETE_REQUEST }) } catch (e) { dispatch({ type: actionTypes.COMPLETE_REQUEST }) dispatch(setNotification('error', 'エラーが発生しました!')) } } } export const setHistory = (histories: any) => ({ type: actionTypes.SET_HISTORY, payload: { histories: histories } })

TypeScript

// Reducer import * as actionTypes from '../utils/actionTypes' import * as actions from '../actions' type Actions = ( | ReturnType<typeof actions.setHistory> ) interface iState { histories: [ { date: string, store: actions.iStore, company: actions.iCompany, products: actions.iProduct[] } ] } const initialState: iState = { histories: [ { date: "", store: { id: 0, image: "", address: "" }, company: { id: 0, name: "" }, products: [ { id: 0, name: "", price: 0 } ] } ] } const HistoryReducer = (state: iState = initialState, action: Actions) => { switch (action.type) { case actionTypes.SET_HISTORY: Object.assign({}, action.payload.histories) console.log(state) return Object.assign({}, state, { state: action.payload.histories }) } return state } export default HistoryReducer

追記

Reducerを下記の様に修正いたしました。

import * as actionTypes from '../utils/actionTypes' import * as actions from '../actions' type Actions = ( | ReturnType<typeof actions.setHistory> ) type History = { date: string, store: actions.iStore, company: actions.iCompany, products: actions.Product[] } interface iState { histories: History[] } const initialState: iState = { histories: [] } const HistoryReducer = (state: iState = initialState, action: Actions) => { switch (action.type) { case actionTypes.SET_HISTORY: return Object.assign({}, state, { state: action.payload.histories }) } return state } export default HistoryReducer

actionに記述していたinterface iProductも下記の様に修正いたしました。

// 購入履歴 export interface iStore { id: number, image: string, address: string } export interface iCompany { id: number, name: string } export type Product = { id: number, name: string, price: number }

gRPCのレスポンスは以下の様に返ってきます。

(4) [{…}, {…}, {…}, {…}] 0: date: "2020/01/29" store: {id: 1, image: "", address: "滋賀県彦根市"} company: {id: 1, name: "セブンイレブン"} product: id: 1 name: "コーラ" price: 150 __proto__: Object __proto__: Object 1: {date: "2020/01/29", store: {…}, company: {…}, product: {…}} 2: {date: "2020/01/29", store: {…}, company: {…}, product: {…}} 3: {date: "2020/01/29", store: {…}, company: {…}, product: {…}} length: 4

上記には記述されていませんが、case actionTypes.SET_HISTORYでreturnする前に

Object.assign({}, state, { state: action.payload.histories }) console.log(state)

をすると下記の様に表示されます。

{histories: Array(0)} histories: Array(0) length: 0

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

nerianighthawk

2020/01/30 02:08

「3次元配列」というのは、通常 [[[a, b, c], [d, e, f], [g, h, i]], [[j, k, l], [m, n]]] のような3重になっている配列のことを指しますが、質問のソースコードには見当たらないように思います。 どこのことを指していますか? また、現在のソースコードでどのような状況なのかを教えていただけると、質問に答えやすいです。 例:こういうエラーが出る、何も入っていない状態になる、等 よろしくお願いします。
退会済みユーザー

退会済みユーザー

2020/01/30 05:07 編集

gRPCのレスポンスが、histories[{date, store{}, company{}, product[{id, name, price},{id, name, price}, ...]}, {date, store{}, company{}, product[{id, name, price}, {id, name, price}, ...]}]の様に配列historiesの中に配列productが入っている為、3次元配列かと思っていました…。 追記いたしました!ご確認よろしくお願い致します! 他に必要な情報がございましたら、お手数をおかけしますがコメントして頂けると幸いです。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。