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 } )
また他のファイルが必要でしたら、おっしゃってください,追記します。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/15 16:41
2017/07/16 00:31
2017/07/17 07:53