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';

好的，有好一咪咪了ＸＤ