Redux+API制作meme generator

栏目: 服务器 · 发布时间: 1周前

来源: whjin.github.io

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新建项目 create-react-app redux-meme-generator

安装插件 npm i -S redux react-redux redux-thunk react-bootstrap

文件结构

运行项目 npm run start ,清空 src 下的文件,建立 index.js ,引入 reactreact-dom 。并在 src 下新建 componentactionsreducer 文件夹。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './component/App';

import {createStore, applyMiddleware} from 'redux';
import rootReducer from './reducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';

import {fetchMemes} from "./actions";

const store = createStore(rootReducer, applyMiddleware(thunk));
store.subscribe(() => console.log('store', store.getState()));
store.dispatch(fetchMemes());

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>
  , document.getElementById('root'));

component/App.js

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

class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to the Meme Generator!</h1>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return state;
}

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

通过以上代码就可以有权限从 component 通过 store 取得 memes ,现在可以进行UI操作。

环境设置完毕。

Fetch Memes Asyncchronously

在串接API时需要登录账号密码,我们将这组账号密码封装成一个 action

src/actions/secrets.js

const username = 'AnnieTsai';
const password = '';

export { username, password };

但我们不想在项目公开时,被其他人看到我们的账号密码。因此可以到 .gitignore 里将这个 action 的路径写上 src/actions/secrets.js ,就不会发布出去。

actions/index.js,编写从 json 获取 memes 的逻辑。

export const RECRIVE_MEMES = 'RESEIVE_MEMES';

function receiveMemes(json) {
  const {memes} = json.data;
  return {
    type: RECRIVE_MEMES,
    memes
  }
}

function fetchMemesJson() {
  return fetch('https://api.imgflip.com/get_memes')
    .then(response => response.json())
}

export function fetchMemes() {
  return function (dispatch) {
    return fetchMemesJson()
      .then(json => dispatch(receiveMemes(json)))
  }
}

我们可以通过 fetch 来获得所需要的内容。

Fetch API提供了一个 JavaScript 接口,用于访问和操作HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单、合乎逻辑的方式来跨网络异步获取资源。

套用thunk middileware

reducer/index.js

import {combineReducers} from 'redux';
import {RECRIVE_MEMES} from "../actions";

function memes(state = [], action) {
  switch (action.type) {
    case RECRIVE_MEMES:
      return action.memes;
    default:
      return state;
  }
}

const rootReducer = combineReducers({memes});

export default rootReducer;

Listing memes

我们可以借由 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>

Load more

当一个页面有大量的资料时,我们就会进行分页或是浓缩的动作。

通过 constructor 建立一个设定显示数量的 state

src/component/App.js

constructor(){
  super();

  this.state = {
    memeLimit: 10
  }
}

JavaScript的 slice() 让我们可以从某个字符串 string.slice() 或数组 Array.slice() 提取某一段信息。在渲染的地方加上: slice(0,this,state,memeLimit)

this.props.memes.slice(3, this.state.memeLimit).map((meme,index) => {
//设置为3,该从第4个开始提取,只会显示后面7个
    return (
      <h4 key={index}>{meme.name}</h4>
    )
  })

接下来我要制作一个按钮,让使用者可以点击 load more ,就可以显示更多 memes 。当使用者点击这个按钮时,便更新 state ,把 memeLimit 再加上10。

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

create meme items

现在把图片呈现出来

component/MemeItem.js

import React, {Component} from 'react';

class MemeItem extends Component {
  render() {
    return (
      <div>
        <img
          src={this.props.meme.url}
          alt={this.props.meme.name}
        />
        <p>
          {this.props.meme.name}
        </p>
      </div>
    )
  }
}

export default MemeItem;

App.js 引入 MemeItem.js ,并在原本渲染呈现 meme name 的地方

转换成 MemeItem component tag

<MemeItem key={index} meme={meme} />

Animating Memes Items

要实现鼠标移动图片之上有动画,可以通过 csshover ,我们可以通过 setState 不断地更新 hover 的状态。在 MemeItem component中设置 constructor

constructor(){
  super();

  this.state = {
    hovered: false
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ASP.NET网页制作教程

ASP.NET网页制作教程

王国荣 / 华中科技 / 2002-1 / 78.00元

《ASP.NET网页制作教程:从基本语法学起(附光盘)》分为:基础篇、对象应用篇、案例研究篇。奠定ASP网页制作的基础,使用Server控件制作互动网页,使用ADO.NET访问数据库;计费网费、会员管理、访客计数器Server版、访客留言板、新闻讨论群组、电子贺卡、E-mail自动传送、FIP文件上传、在线投票、在线问卷调查、在线购物、在线考试、广告回旋板、聊天室。一起来看看 《ASP.NET网页制作教程》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具