Học React/Redux qua ví dụ thực tế: Sử dụng dữ liệu từ SoundCloud API và kết thúc hành trình

2017-04-18T12:29:46+07:00

khi nào rảnh làm bài chia sẻ kinh nghiệm khi phỏng vấn ở KMS nha anh

2017-04-07T13:31:12+07:00

UX chán qua nhe. Để nút play vừa nhỏ vừa nằm bên phải thì làm sao người dùng bấm đc :)

	...

	import {setTracks} from '../actions/track';

	...

	export function auth() {
	return (dispatch) => {
	SoundCloud.connect().then((session) => {
	dispatch(fetchMe(session));
	dispatch(fetchTracks(session));
	});
	}
	}

	...

	function fetchTracks(session) {
	return (dispatch) => {
	fetch(`${API_HOST}/me/activities?limit=20&offset=0&oauth_token=${session.oauth_token}`)
	.then((res) => res.json())
	.then((data) => {
	dispatch(setTracks(data.collection));
	});
	}
	}

	import React, {PropTypes, Component} from 'react';

	export default class Track extends Component {
	static propTypes = {
	track: PropTypes.object.isRequired
	}

	render() {
	const {origin: {artwork_url, title}} = this.props.track
	return (
	<div className='track'>
	<img src={artwork_url} />
	{title}
	<button type='button'>Play</button>
	</div>
	)
	}
	}

	import Track from './Track';
	import {shallow} from 'enzyme';

	describe('Track', () => {

	it('shows track title', () => {
	const props = {
	track: {origin: {title: 'foo'}}
	}
	const element = shallow(<Track {...props} />);

	expect(element.contains('foo')).to.be.true;
	})

	});

	import TrackList from './TrackList';
	import Track from './Track';
	import {shallow} from 'enzyme';

	describe('TrackList', () => {

	it('shows two <Track /> component', () => {
	const props = {
	tracks: {
	tracks: [{ origin: { id: 1, title: 'foo' }}, { origin: { id: 2, title: 'bar' }}],
	activeTrack: null
	}
	};
	const element = shallow(<TrackList {...props} />);

	expect(element.find(Track)).to.have.length(2);
	});

	});

	export default class TrackList extends Component {

	render() {
	return (
	<div>
	...
	<div>
	<audio
	id='player'
	ref={(player) => {this.player = player;}}
	src='iDontKnow'>
	</audio>
	</div>
	</div>
	)
	}
	}

Fetch đống dữ liệu về mà xài

	import {ActionTypes} from '../core/constants';

	const initialState = {
	tracks: [],
	activeTrack: null
	};

	export default function(state = initialState, action) {
	switch (action.type) {

	case ActionTypes.TRACK_PLAY:
	return setActiveTrack(state, action)
	}

	return state;
	}

	function setActiveTrack(state, action) {
	const {track} = action;
	return {...state, activeTrack: track};
	}