iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

React.js & Laravel 30天訓練系列 第 20

【Day 20】Finally we can update array array object

  • 分享至 

  • xImage
  •  

這裡先說 方向錯了 就是會繞了一圈 不過 你也會懂很多東西
先看 我們的 model.js

export const MyBoxData = Immutable.fromJS({
	MyBoxList: []
});

有一個重點 我們是用 Immutable 去管理我們的資料 我原本一直找 react redux array object 的方法
但這是有問題的 因為我後來讀完文件 Immutable 自己有自己的一招
其實 這個我應該早就要發現 因為我在拿他的東西 都是要用 state.get(....), 跟一些範例的直接 object 存取是完全不一樣的

話不多說 來看最後成功版本~

Action 部分

export const SetIsIns = (_myboxcount, _compid, _userid, _discid, _subjid, _isins, _token) => {
	var formData = new FormData();
	formData.append("token", _token);
	formData.append("CompID", _compid);
	formData.append("UserID", _userid);
	formData.append("DiscID", _discid);
	formData.append("SubjID", _subjid);
	formData.append("IsIns", _isins);

	return (dispatch) => {
		fetch("http://xxx.xxx.xxx/subj/set_subj_is_ins", {
				method: "POST",
				body: formData
			})
			.then(function(response) {
				return response.json();
			})
			.then(function(jsonData) {
				// 修改mybox 項目
				// 修改mybox 數字
				let _currentMyBoxCount = _isins == 0 ? (_myboxcount - 1) : (_myboxcount + 1)
				if (jsonData.result) {
					// 更新數字
					dispatch({
						type: Update_MyBox_Number,
						payload: {
							MyBoxCount: _currentMyBoxCount
						}
					});
					// 更新項目
					dispatch({
						type: Update_MyBox_Item_Visible,
						payload: {
							DiscID: _discid,
							SubjID: _subjid,
							IsIns: _isins
						}
					});
				} else {
					// 伺服器動作異常
				}
			})
			.catch(function(e) {
				console.log(e);
			})
	}
}

reducer 部分

Update_MyBox_Item_Visible: (state, {payload}) => {
    return state.map((_mybox_item, _mybox_index) => {
        if (_mybox_index === "MyBoxList") {
            // MyBoxLst
            return _mybox_item.map((_disc_item, _disc_index) => {
                // console.log(_disc_item.getIn([0, 'DiscID']) === payload.DiscID);
                if (_disc_item.getIn([0, 'DiscID']) === payload.DiscID) {
                    return _disc_item.map((_subj_item, _subj_index) => {
                        if (_subj_item.get('SubjID') === payload.SubjID) {
                            return _subj_item.set('Visible', payload.IsIns);
                        }
                        return _subj_item;
                    });
                    return _disc_item;
                }
                return _disc_item;
            });
            return _mybox_item;
        }
    });
}

其實 Immutable 就是要你自己進去到那一層 然後很直覺的 set 給他就可以了
然後 你沒有要動的那幾個 map item 就原封不動的 return 回去就可以了

終於完成了 ~ 明天希望就可以把列表的事情結束~


上一篇
【Day 19】How to Update Array Array Object in React Redux Reducer Part 2
下一篇
【Day 21】Semantic UI Table List Finish
系列文
React.js & Laravel 30天訓練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言