iT邦幫忙

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

Zero to hero with React.js系列 第 28

【Day 28 React】Redux+API 製作 meme generator—— Part2

  • 分享至 

  • xImage
  •  

Listing memes

今天第一個任務 94 呈現 memes~~~
第一步驟,先進到 App.js

 import { connect } from 'react-redux';
 

撰寫一個 map state 的方法

function mapStateToProps(state) {
  return state;
}

接著把 connect export

export default connect(mapStateToProps, null)(App);

現在我們有權限可以從 component 透過 store 取得 memes 了,這表示我們現在可以來操作 UI 囉!
就來寫寫 mapping function 吧!我們可以藉由 meme name 來區別每一個 component,每一個 meme 物件都有 name 這個屬性值,讓它們能夠被識別。另外,我們也需要加上 key 來判別每個物件的唯一性。

<div>
    <h2> Welcome to the Meme Generator!</h2>
    {
      this.props.memes.map((meme,index) => {
        return (
          <h4 key={index}>{meme.name}</h4>
        )
      })
    }
  </div>
  


完美!透過 mapping 我取得了 API 裡的 100 個 meme names,真是太抱歉惹螢幕太小只截到一些。

Load more

當一個頁面有太大量的資料時,我們就會進行 分頁 或是 濃縮 的動作。我畢業專題搞 php on Laravel 的分頁,整個爆炸頭痛r。

透過 constructor 建立一個設定顯示數量的 state,我設定為 10 個

constructor(){
  super();

  this.state = {
    memeLimit: 10
  }
}

JavaScript 的 slice() 讓我們可以從某個字串 string.slice() 或陣列 Array.slice() 提取某一段資訊。在渲染的地方加上: .slice(0, this.state.memeLimit)

this.props.memes.slice(0, this.state.memeLimit).map((meme,index) => {
    return (
      <h4 key={index}>{meme.name}</h4>
    )
  })
  


嗯哼~取得前十個 names
改成從第 4 個開始取

this.props.memes.slice(3, this.state.memeLimit).map((meme,index) 


便可以看到前三個 meme names 不會顯示,只顯示後面 7 個

接下來,我要製作一個按鈕,讓使用者可以點擊 load more,就可以顯示更多 memes。當使用者點擊這個按鈕時,便更新 state ,把 memeLimit 再加上 10。

加上 onClick handler

<div onClick={() => {
     this.setState({memeLimit: this.state.memeLimit+10})
}}>Load 10 more memes...</div>
    

儲存之後,我們可以看到很醜的 Load more button.....
點擊之後就會顯示接下來的十個 memes

好吧因為這個按鍵真的太醜了,於是我們先來修改一下它的外觀。。。。
先賦予這個 div 一個 className,並在 src 底下創建一個 styles folder,然後新增一個 index.css。建立完 css 之後記得要回到 App.js 裡 import 進來,否則不會吃到剛剛所設定的外觀唷!

import '../styles/index.css';


好的,有好一咪咪了XD


上一篇
【Day 27 React】Redux+API 製作 meme generator—— Part1
下一篇
【Day 29 React】Redux+API 製作 meme generator—— Part3
系列文
Zero to hero with React.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言