iT邦幫忙

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

Zero to hero with React.js系列 第 25

【Day 25 React】Redux 做遊戲角色陣容應用程式——趴ㄈ ㄞˋ

mapping dispatch to props

import { bindActionCreators } from 'redux';
import { addCharacterById } from '../actions';

bindActionCreators
綁定 action

function mapDispatchToProps(dispatch){
  return bindActionCreators({ addCharacterById }, dispatch);
} 

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

以上另外一種簡短寫法是:

export default connect(mapStateToProps, {addCharacterById})(CharacterList);

在 export 的地方,直接透過物件,列出我們要綁定的 addCharacterById,如此一來便不需要再多寫一個 mapDispatchToProps helper。

trigger event

加上一個 + 符號,當加號被點擊時,便觸發事件。透過 onClick 去綁定被點擊的物件

<div onClick={() => this.props.addCharacterById(character.id)}>
   +
</div>


現在可以看到 console.log 倒數四行,顯示我剛剛點擊的物件


Styling Application
現階段先來美化一下我的應用程式,寫到這邊腦袋快燒乾了。
先在 public/index.html 套用 bootstrap cdn,並在 src 建立 styles 資料夾。我們可以把所有 css 相關檔案放在這個資料夾中。

App.js 裡引入 css

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

並在 <div> 加上 className 便可以透過這個 className 進行樣式設定。

持續更新ing


上一篇
【Day 24 React】Redux 做遊戲角色陣容應用程式——趴四
下一篇
【Day 26 React】Redux 做遊戲角色陣容應用程式——完結篇
系列文
Zero to hero with React.js30

尚未有邦友留言

立即登入留言