本人工作之余的闲暇时间还是很充裕的。在完成经理安排的任务后,基本上都是在自学,主要是阅读各种技术文档、浏览博客、运行别人写的一些前端demo并观赏与赞叹。在ScorpionJay 同学的带领下,我们决定决定做一个react版的音乐播放SPA(Single Page web Application)。

首选,模仿网易云的界面,因为是程序猿最爱的音乐播放器,不解释!然而,分析网易云的数据请求时,貌似全是403。github上有大牛提供了网易云音乐的一些接口,非常好。所以,对于数据接口,我们最后选择了“哈喽,酷狗!”。

阅读了redux的文档后,并参与了一个练手项目r-music的部分开发后,通过自己的理解,整理了这篇文档。

初学,所以一定会有不详或者错误的地方。

参考文档

开发这个项目,我参阅的学习文档如下:

流程图解

通过我自己的理解方式,简单地整理了react、redux、react-redux三者之间的关系图,如下:

通过代码,梳理redux、react-redux

注:下面代码只列出搜索功能的关键部分,源码地址:https://github.com/ScorpionJay/r-music

1. Provider

react-redux提供的Provider组件,可以让容器组件取得state

src/index.js

import configureStore from './stores'
const store = configureStore() <Provider store={store}>
<Router history={browserHistory} routes={routers} />
</Provider>

上面代码中,Provider使得Router的所有子组件可以取得state

import configureStore from './stores'为redux的store,如下:

src/store/index.js

import reducers from '../reducers/index';

export default function(initialState) {
let createStoreWithMiddleware // 判断环境是否logger
if (process.env.NODE_ENV === 'production') {
createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
}else{
//开发环境在console可以看到整个状态树的实时日志
const logger = createLogger();
createStoreWithMiddleware = applyMiddleware(thunk,logger)(createStore);
}
let store = createStoreWithMiddleware(reducers, initialState);
return store;
};

2. react:Component

src/containers/search.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux' import { searchHotAPI,searchResultAPI,clearSearchResultAPI} from '../actions/search' class Search extends Component { constructor(props) {
super(props);
} componentDidMount(){
const { dispatch } = this.props
dispatch(searchHotAPI())
} searchEvt(keyword,page=1){
const { dispatch } = this.props;
keyword = keyword || this.refs.keyword.value
if(keyword!=''){
dispatch(searchResultAPI(keyword, page));
}else{
dispatch(clearSearchResultAPI());
}
this.refs.keyword.value = keyword;
} render() {
const { dispatch,controll,search } = this.props;
return (
<div className='root' style={{fontSize:'1.2rem'}}> //... </div>
)
}
} function map(state) {
return {
search: state.search,
controll: state.music.controll
}
} export default connect(map)(Search)

react-redux的connect方法,用于从 UI 组件生成容器组件。

上面代码中,connect(map)(Search)使得组件Search可以通过props取得map返回的数据。

dispatch(searchHotAPI())dispatch(clearSearchResultAPI()),获取数据并分发action。

3. redux

src/actions/search.js

import Config from '../config'
import { spin,spinHidden } from './spin'
import api from '../api' import Storage from '../storage' //定义常量
export const SEARCH_HOT = 'SEARCH_HOT'
export const SEARCH_RESULT = 'SEARCH_RESULT' //actionCreator,这里是一个函数,返回action对象
const searchHot = (obj) => {return {type:SEARCH_HOT, obj}}
const searchResult = (obj) => {return {type:SEARCH_RESULT, obj}} //搜索热门关键字
export function searchHotAPI(){
return async dispatch => {
try{
let hots = await api( Config.searchHotAPI );
dispatch(searchHot(hots.data.info));
} catch(error) {
console.log(error);
}
}
} //通过关键字搜索
export function searchResultAPI(keyword,page){
return async dispatch => {
try {
let result = await api( Config.searchResultAPI, 'get', {keyword,page} );
//搜索历史存到localStorage
setSearchHistory(keyword);
dispatch(searchResult(result.data.info));
} catch(error) {
console.log(error);
}
}
}

上面代码中,searchHotsearchResult都是Action creator,即分别返回一个action。

action是一个带有type关键字的对象,如{type:SEARCH_HOT, obj}{type:SEARCH_RESULT, obj}

searchHotAPIsearchResultAPI分别返回一个获取数据并分发action的异步函数,一般在容器组件里会调用。

src/reducer/search.js

import { combineReducers } from 'redux'
import { SEARCH_HOT,SEARCH_RESULT } from '../actions/search' function hots(state = [], action){
switch(action.type) {
case SEARCH_HOT:
return action.obj;
default:
return state;
}
} function result(state = [], action){
switch(action.type) {
case SEARCH_RESULT:
return action.obj;
default:
return state;
}
} const Reducers = combineReducers({
hots,result,
}) export default Reducers

上面代码中,hots函数收到名为SEARCH_HOT的 Action 以后,就返回一个新的 State,作为热门搜索的结果。

src/store/index.js中,开发环境下,引入了中间件redux-loggercreateLogger,在浏览器console可以观察到每次reducer的结果,如下:

src/reducer/index.js

import { combineReducers } from 'redux'
//...
import search from './search' const reducers = combineReducers({
//...
search,
}) export default reducers

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State,然后View发生变化。 combineReducers将多个拆分的reducer合并。

redux 个人整理的更多相关文章

  1. Redux----Regular的Redux实现整理

      Regular的Redux实现整理 什么问题? 组件的树形结构决定了数据的流向,导致的数据传递黑洞 怎么解决? 所有组件都通过中介者传递共享数据 方案: 中介者: (function create ...

  2. 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux

    因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...

  3. react与redux学习资料的整理

    **重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...

  4. React初识整理(五)--Redux和Flux(解决状态传递问题)

    Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...

  5. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  6. 我要成为前端工程师!给 JavaScript 新手的建议与学习资源整理

    来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...

  7. Redux原理(一):Store实现分析

    写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...

  8. 微信小程序(应用号)资源汇总整理

    微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...

  9. Redux教程1:环境搭建,初写Redux

    如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...

随机推荐

  1. java多线程-读写锁原理

    Java5 在 java.util.concurrent 包中已经包含了读写锁.尽管如此,我们还是应该了解其实现背后的原理. 读/写锁的 Java 实现(Read / Write Lock Java ...

  2. thinkphp5 IIS7.5 隐藏index.php的方法

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  3. algorithm之unique

    #include<iostream> #include<algorithm> usingnamespace std; /**< unique函数的算法思想 */ vect ...

  4. (五)动态SQL

    第一节:if条件 第二节:choose,when和otherwise条件 第三节:where条件 1.自动加上where: 2.如果where子句以and或者or开头,则自动删除第一个and或者or: ...

  5. Ad Hoc Distributed Queries的启用与关闭

    启用Ad Hoc Distributed Queries: exec sp_configure 'show advanced options',1 reconfigure exec sp_config ...

  6. Effective STL 笔记 -- Item 6 ~ 7: Container and Object Pointer

    Effective STL 笔记 – Item 6 ~ 7: Container and Object Pointer 中间两次笔记被删掉了,简单补一下: Item 3 中提到如果将对象直接放入容器中 ...

  7. 能ping但是无法上网

    管理员权限,执行以下这个命令就好了. netsh winsock reset 配置问题,重置windows socket.

  8. XML&反射

    本节内容: XML DTD约束 Schema约束 dom4j解析 反射 为了实现访问不同路径(/hello)执行不同的资源(HelloMyServlet),我们需要使用XML进行配置:为了限定XML内 ...

  9. MySQL开发技巧

    MySQL基础表和数据 如何进行行列转换 行转列 场景:报表统计(sum()).汇总显示表数据:select * from score; 希望达到的效果 cross join SQL如下: selec ...

  10. filebeat安装部署

    简单概述 最近在了解ELK做日志采集相关的内容,这篇文章主要讲解通过filebeat来实现日志的收集.日志采集的工具有很多种,如fluentd, flume, logstash,betas等等.首先要 ...