剧场模式
首页前后端分离React & Redux & React-Router & Nodejs 实战 crud 项目

React & Redux & React-Router & Node.js 实战 crud 项目 #3 Redux connect

下载源码hfpp2012发布于React2284 次点击播放时长:04:02
3

src/components/GaemsPage.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import GamesList from './GamesList';

class GamesPage extends Component {
  render() {
    return (
      <div>
        <GamesList games={ this.props.games } />
      </div>
    );
  }
}

GamesPage.propTypes = {
  games: PropTypes.array.isRequired
}

const mapStateToProps = (state) => {
  return {
    games: state.games
  };
};

export default connect(mapStateToProps)(GamesPage);

src/components/GamesList.js

import React from 'react';
import PropTypes from 'prop-types';

const GamesList = ({ games }) => {
  const emptyMessage = (
    <p>There are no games yet in your collection.</p>
  );

  const gamesList = (
    <p>games List</p>
  );

  return (
    <div>
      { games.length === 0 ? emptyMessage : gamesList }
    </div>
  )
}

GamesList.propTypes = {
  games: PropTypes.array.isRequired
}

export default GamesList;
3 条回复
播放列表目录

1FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #1 项目搭建

2FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #2 Semantic Ui 和 React-Router

FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #3 Redux connect

4FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #4 发送 ajax 请求

5FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #5 用 es6 语法来写服务器代码

6FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #6 连接数据库 MongoDB

7ProReact & Redux & React-Router & Node.js 实战 crud 项目 #7 路由与表单

8ProReact & Redux & React-Router & Node.js 实战 crud 项目 #8 客户端验证

9ProReact & Redux & React-Router & Node.js 实战 crud 项目 #9 客户端发送创建记录的请求

10ProReact & Redux & React-Router & Node.js 实战 crud 项目 #10 前端和后端对错误路由的处理

11ProReact & Redux & React-Router & Node.js 实战 crud 项目 #11 后端创建数据和前端路由跳转

12ProReact & Redux & React-Router & Node.js 实战 crud 项目 #12 列表页面

13ProReact & Redux & React-Router & Node.js 实战 crud 项目 #13 新增记录时列表页延迟加载的问题

14ProReact & Redux & React-Router & Node.js 实战 crud 项目 #14 修改记录表单和路由参数

15ProReact & Redux & React-Router & Node.js 实战 crud 项目 #15 修改记录填充表单数据

16ProReact & Redux & React-Router & Node.js 实战 crud 项目 #16 修改记录提交数据

17ProReact & Redux & React-Router & Node.js 实战 crud 项目 #17 重构表单代码

18ProReact & Redux & React-Router & Node.js 实战 crud 项目 #18 删除记录(完结)

支付宝付款
订阅或购买扫码加我微信

加我微信:15014006126

友情提示
   官方 QQ 1 群 697272886(500/2000)
   官方 QQ 2 群 856141852

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:21

Top