Redux+API制作meme generator

栏目: 服务器 · 发布时间: 5年前

内容简介：新建项目安装插件运行项目

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

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

文件结构

运行项目 npm run start ，清空 src 下的文件，建立 index.js ，引入 react 和 react-dom 。并在 src 下新建 component 、 actions 、 reducer 文件夹。

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

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

constructor(){
  super();

  this.state = {
    hovered: false
  }
}

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

查看所有标签

猜你喜欢:

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

码农书籍

Data Mining

Jiawei Han、Micheline Kamber、Jian Pei / Morgan Kaufmann / 2011-7-6 / USD 74.95

The increasing volume of data in modern business and science calls for more complex and sophisticated tools. Although advances in data mining technology have made extensive data collection much easier......一起来看看《Data Mining》这本书的介绍吧!

码农工具