redux 个人整理
序
本人工作之余的闲暇时间还是很充裕的。在完成经理安排的任务后,基本上都是在自学,主要是阅读各种技术文档、浏览博客、运行别人写的一些前端demo并观赏与赞叹。在ScorpionJay 同学的带领下,我们决定决定做一个react版的音乐播放SPA(Single Page web Application)。
首选,模仿网易云的界面,因为是程序猿最爱的音乐播放器,不解释!然而,分析网易云的数据请求时,貌似全是403。github上有大牛提供了网易云音乐的一些接口,非常好。所以,对于数据接口,我们最后选择了“哈喽,酷狗!”。
阅读了redux的文档后,并参与了一个练手项目r-music的部分开发后,通过自己的理解,整理了这篇文档。
初学,所以一定会有不详或者错误的地方。
参考文档
开发这个项目,我参阅的学习文档如下:
- React 入门实例教程:http://www.ruanyifeng.com/blog/2015/03/react
- React Router 使用教程:http://www.ruanyifeng.com/blog/2016/05/react_router.html
- ECMAScript 6 入门:http://es6.ruanyifeng.com/
- redux中文文档:http://www.redux.org.cn/
- Redux 入门教程(三)——React-Redux 的用法:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
- Flex 布局教程——语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
流程图解
通过我自己的理解方式,简单地整理了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);
}
}
}
上面代码中,searchHot
和searchResult
都是Action creator,即分别返回一个action。
action是一个带有type关键字的对象,如{type:SEARCH_HOT, obj}
和{type:SEARCH_RESULT, obj}
。
searchHotAPI
和searchResultAPI
分别返回一个获取数据并分发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-logger
的createLogger
,在浏览器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 个人整理的更多相关文章
- Redux----Regular的Redux实现整理
Regular的Redux实现整理 什么问题? 组件的树形结构决定了数据的流向,导致的数据传递黑洞 怎么解决? 所有组件都通过中介者传递共享数据 方案: 中介者: (function create ...
- 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux
因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...
- react与redux学习资料的整理
**重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...
- React初识整理(五)--Redux和Flux(解决状态传递问题)
Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- 我要成为前端工程师!给 JavaScript 新手的建议与学习资源整理
来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...
- Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- 微信小程序(应用号)资源汇总整理
微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...
- Redux教程1:环境搭建,初写Redux
如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...
随机推荐
- opencv(2)绘图
绘制直线 函数为:cv2.line(img,Point pt1,Point pt2,color,thickness=1,line_type=8 shift=0) 有值的代表有默认值,不用给也行.可以看 ...
- CVE-2010-0249 极光
传说中的极光漏洞 Microsoft Internet Explorer非法事件操作内存破坏漏洞 Microsoft Internet Explorer是微软Windows操作系统中默认捆绑的WEB浏 ...
- PHP array_diff 计算数组的差集
array_diff (PHP 4 >= 4.0.1, PHP 5) array_diff — 计算数组的差集 说明 array array_diff ( array $array1 , arr ...
- WordCount_命令行运行时指定参数
WordCountApp命令行运行时指定参数 1.修改之前的WordCountApp.java的代码 package cmd; import java.net.URI; import org.apac ...
- thinkphp数据查询方法总结select ,find,getField,query
thinkphp已经封装好了常用的查询方法,且都比较实用,对于不常用的查询框架也保留了原始查询方法query. 1 2 $Model = new Model() // 实例化一个model对象 没有对 ...
- c++ 栈(顺序表)
栈可以用顺序表(数组)也可以用链表来储存内容,本文采用顺序表(数组)来保存内部元素.代码如下: 1 #include <iostream> 2 using namespace std; ...
- Mermaid 学习
基础 在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; ...
- CSUOJ 1868 潜在好友
Description 小X在搬砖写一个论坛,这个时候老板突然想到一个功能,让小X今天赶快实现.大概就是如果某个人是你好友的好友那么他的头像上面会有特殊的标志.小X想不到较好的办法来解决如何验证两个人 ...
- 深入理解ajax系列第九篇
前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...
- [ 转载 ] Java基础4--Java中的static关键字解析
Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...