iT邦幫忙

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

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

【Day 19】How to Update Array Array Object in React Redux Reducer Part 2

  • 分享至 

  • xImage
  •  

OK 昨天的錯誤 至少我知道了幾件事情

  1. 我更新進去的東西 store 收得到 但是很明顯我的 Type 一定有問題
  2. 有更改的地方才出錯 就是if條件裡面的 其他地方的回傳 資料是跟以前一樣的
  3. 後來我去讀了 Redux 的tree 精神是 複製一份新的出來 再把他放進去 所以 我們直接塞物件 我認為這個非常低級的做法他不接受 算是很合理

好 接下來呢 我們怎麼做 先看我對 顯示的 component 做了一些變更

<Table padded>
  <Table.Body>
    {
      this.props.MyBoxList.map((_discItem, _discIndex) =>
        _discItem.map((_subjItem, _subjIndex) => 
          <Table.Row key={_subjIndex}>
          {
            _subjIndex == 0 ?
              <section>
                <div>
                  <h2 style={styles.discTitle}>
                    {_subjItem.getIn(['disc_data','DiscName'])}
                  </h2>
                </div>
                {
                  this.renderTableList(_subjItem.get('SubjID'),
                                      _subjItem.get('DiscID'),
                                      _subjItem.get('Visible'),
                                      _subjItem.getIn(['fav_data}']),
                                      _subjItem.getIn(['subject_data','Title'])
                                      )
                }
              </section>
              :
              <section>
                {
                  this.renderTableList(_subjItem.get('SubjID'),
                                      _subjItem.get('DiscID'),
                                      _subjItem.get('Visible'),
                                      _subjItem.getIn(['fav_data}']),
                                      _subjItem.getIn(['subject_data','Title'])
                                      )
                }
              </section> 
          }
          </Table.Row>
        ), this
      )
    }
  </Table.Body>
</Table>

目的兩個

  1. 什麼時間點要顯示 主題屬於在哪一個討論組底下 原本還有用if 什麼的去包覆 更改成這樣更直覺
  2. 重複產生的東西 拉出去 function

再來 這一天的 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) {
                    console.log("in", _disc_item.getIn([0, 'DiscID']));
                    return _disc_item.map((_subj_item, _subj_index) => {
                        console.log("in22", _subj_item.get('SubjID') === payload.SubjID);
                        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;
        }
    });
}

更改幾個 不用再去 const 還有最後面的 _mybox_item 不用再去做 object.spread

看看明天版本吧 就是最後OK的版本~


上一篇
【Day 18】How to Update Array Array Object in React Redux Reducer
下一篇
【Day 20】Finally we can update array array object
系列文
React.js & Laravel 30天訓練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言