介面的呈現

在做好基本功能之後，先來把介面刻完，然後就可以把功能 map 到 UI 元件上了。
除了 import React 和 component 之外，我們需要從 react-redux 引入一個叫 connect 的 function。這個 function 允許我們在這個 component 裡存取 store 裡的 data

import React, { Component } from 'react';
import { connect } from 'react-redux';


class CharacterList extends Component{
  render(){
    return(
      <div>
        <h2>Characters</h2>
      </div>
    )
  }
}

export default connect()(CharacterList);

mapping state to props

在 CharacterList.js 裡撰寫 mapping 邏輯

function mapStateToProps(state){
  console.log('state', state);
  return {};
}

export 的地方要回傳兩個參數

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

回到 App.js 裡，把 CharacterList 引入，在渲染的地方加上 <CharacterList />

import React, { Component } from 'react';
import CharacterList from './CharacterList';


class App extends Component{
  render(){
    return(
      <div>
          <h2>SuperSquad</h2>
          <CharacterList />
      </div>
    )
  }
}

export default App;

渲染結果～有看到我剛剛寫上的 Characters

mapping character

透過 this.props.characters.map 把 characterList 裡的 character.name render 出來

class CharacterList extends Component{
  render(){
    console.log('this.props', this.props);
    return(
      <div>
        <h4>Characters</h4>
        <ul>
          {
            this.props.characters.map(character => {
              return(
                <li key={character.id}>
                  <div>{character.name}</div>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}