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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1161閲覧

microservice,reduxでのreducer部分のコードの意味

kazoogon

総合スコア281

Redux

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2017/07/15 13:42

Micro serviceを使用しての案件にアサインされてreduxの基礎的な情報は調べた
→しかし他人のコードを見てもまだ分からない部分がある
という状態です。
とりあえずreducer部分のコードを全部理解しようとしていますが、分からないところがまだありお助けして頂ければありがたいです。

(顧客データcsvファイルアップロードを行うページ、わからない部分はコード内に書きました)

//reducer作成=stateの設計 //reducer は handleActions を使って実装できる。 import { handleActions } from 'redux-actions' //handleActions使いますよの宣言 import { createSelector } from 'reselect' // ①???どこからとってきてるのか?? import { selectCustomers, listCustomers, viewCustomer, listCustomerTags, listCustomerRanks, showCsvUploadErrors } from './actions' //これらのデータがactionからくる const defaultState = { //②storeにdefaultで渡す値?? モジュール???ただの配列の名前?(この名前はここで勝手に決められる??) customers: [], customer: {}, selectedCustomerIds: {}, users: [], customerTags: [], customerRanks: [], csvUploadErrors: [] } //関数を実行した後 受け取った State を前後で比較して異なる状態の時のみ 新しい方の State を採用する、という動きになっています。 //→objdect,arrayを直接書き換えてはダメ const handlers = { //③ここのhandlerという名前に何か意味はあるのか?? [selectCustomers]: (state, action) => ({...state, //④payloadとはデータの設定だが,一体具体的にはどういうことか? ...{selectedCustomerIds: action.payload}}), [listCustomers]: (state, action) => ({...state, ...{customers: action.payload, selectedCustomerIds: {}}}), [viewCustomer]: (state, action) => ({...state, ...{customer: action.payload}}), [listCustomerTags]: (state, action) => ({...state, ...{customerTags: action.payload}}), [listCustomerRanks]: (state, action) => ({...state, ...{customerRanks: action.payload}}), [showCsvUploadErrors]: (state, action) => ({...state, ...{csvUploadErrors: action.payload}}) } export default handleActions(handlers, defaultState)// ⑤handleActionsの関数をstoreに渡すということか?? 上のconst defaultStateの中に書いてはいけないのか?? const getCustomers = (state) => state.customers export const getCustomerById = createSelector( //⑥顧客iDを読み込みstoreにexportしているのはわかるが、reducerで定義したconstの名前をstoreで使えるということか? [ getCustomers ], (customers) => { const customerById = {} customers.forEach((customer) => { customerById[customer.id] = customer }) return customerById } )

また他のファイルが必要でしたら、おっしゃってください,追記します。
よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問内容を見る限り、redux以前の問題なような気がしますが、簡単に回答致します。

// ①???どこからとってきてるのか??

node_modulesフォルダがプロジェクトフォルダにあるかと思いますが、その中に該当ライブラリが存在しているかと思います。

//②storeにdefaultで渡す値?? モジュール???ただの配列の名前?(この名前はここで勝手に決められる??)

storeにdefaultで渡す値で合ってます。名前はもちろん、自分で決めているものです。勝手に決められることはありません。

//③ここのhandlerという名前に何か意味はあるのか

変数名って普通、意味をもたせてつけませんか?

//④payloadとはデータの設定だが,一体具体的にはどういうことか?

一体具体的にどういうこととは、一体具体的にどういうことでしょうか?

// ⑤handleActionsの関数をstoreに渡すということか?? 上のconst defaultStateの中に書いてはいけないのか

storeに渡されるのは、この関数でリターンされる値ですね。上のdefaultStateでは書けません。storeにはserializableな値のみstore出来ます。関数は出来ません。(あ、ちょっと未確認です。関数はstoreに保存出来ないと思います。。)

//⑥顧客iDを読み込みstoreにexportしているのはわかるが、reducerで定義したconstの名前をstoreで使えるということか?

顧客IDを読み込みstoreにexportなんてしていません。

ここで定義しているgetCustomerByIdというメソッドはアプリケーションのどこかでstore内のカスタマー情報を取得するメソッドになってるみたいですね。

投稿2017/07/15 16:41

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/15 16:41

というか、お仕事のコードを載せてしまって大丈夫なのでしょうか。。。
kazoogon

2017/07/16 00:31

回答ありがとうございます。  ご指摘の通り始めてみるようなコードで???という状態です。 もうちょっと調べてみます。 またコードの内容はそのまま載せているわけではございませんので大丈夫です。
kazoogon

2017/07/17 07:53

すみません追記での質問です。 ④についてですが「state(store)の中のselectCustomerIdsというキーの部分をaction.payloadの値に変更してselectCustomersという名前にキーに保管??」という解釈であっているでしょうか?? いろんなサンプルと書き方が少々違うので困惑しております
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問