react+redux+Instagram
项目地址:https://github.com/xiaoyuqing/react-redux-instagram,喜欢的话动动手指点点赞^-^
1.初始化项目
IndexRoute是默认路由
2.增加store文件
const history = syncHistoryWithStore(browserHistory, store)
用syncHistoryWithStore是为了让react-router 的 history 跟 store 互相同步
3.增加action文件
包括增加❤️,增加评论,删除评论
4.增加reducer文件
combineReducers 把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore 方法。
为了让router与redux保持一致,要把routeReducer加进来,必须是routing,不是routing会报错。
const rootReducer = combineReducers({posts, comments, routing: routerReducer });
5.把Provider引进来,把store传给provider,history传给router
<Provider store={store}>
<Router history={history}>
</Router>
</Provider>
6.创建一个app组件,编写mapStateToProps,mapDispachToProps,用connect把组件跟store连接起来,用bindActionCreators结合actionCreators跟dispatch,把 action creator 往下传到一个组件
const App = connect(mapStateToProps, mapDispachToProps)(Main);
7.接下来创建photo组件,把photo组件传给photoGrid,主页已经创建好了。修改post的reducer,点❤️的时候增加like数,还有动效
// post reducer
function posts(state = [], action) {
switch(action.type) {
case 'INCREMENT_LIKES' :
console.log("Incrementing Likes!!");
const i = action.index;
return [
...state.slice(0,i), // before the one we are updating
{...state[i], likes: state[i].likes + 1},
...state.slice(i + 1), // after the one we are updating
]
default:
return state;
}
}
8.接下来创建comments组件,comments可以增加评论跟删除评论,在single里面引入comments跟photo,增加comments的reducer,详情页就建好了
function postComments(state = [], action) {
switch(action.type){
case 'ADD_COMMENT':
// return the new state with the new comment
return [...state,{
user: action.author,
text: action.comment
}];
case 'REMOVE_COMMENT':
// we need to return the new state without the deleted comment
return [
// from the start to the one we want to delete
...state.slice(0,action.i),
// after the deleted one, to the end
...state.slice(action.i + 1)
]
default:
return state;
}
return state;
}
总结
一个项目做下来,对redux跟react-redux的使用更加熟悉了,发现redux对于组件间的数据管理真的是很有效果的
github地址:https://github.com/xiaoyuqing/react-redux-instagram, 喜欢的话动动手指点点赞^-^
react+redux+Instagram的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性
reduce().filter().map().some().every()....展开属性 这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
随机推荐
- 从壹开始微服务 [ DDD ] 之十一 ║ 基于源码分析,命令分发的过程(二)
缘起 哈喽小伙伴周三好,老张又来啦,DDD领域驱动设计的第二个D也快说完了,下一个系列我也在考虑之中,是 Id4 还是 Dockers 还没有想好,甚至昨天我还想,下一步是不是可以写一个简单的Angu ...
- 再遇angular(angular4项目实战指南)
这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...
- SpringBoot从零单排 ------初级入门篇
有人说SSM已死,未来是SpringBoot和SpringCloud的天下,这个观点可能有点极端,但不可否认的是已经越来越多的公司开始使用SpringBoot.所以我将平时学习SpringBoot的内 ...
- DFS(深度优先搜索)
简介 DFS的过程是一个递归过程,它是从图中的某个顶点开始,首先访问起始点v,然后选择一个与顶点v相邻的且没有被访问的顶点w,以w为起始顶点,在进行DFS,直到图中所有与v相邻的顶点都被访问过为止. ...
- js 异步转同步
在项目中有些逻辑或者请求依赖另一个异步请求,大家常用的方法是回调函数.现在有个高大上的解决方案:await async . async 是“异步”的简写,而 await 可以认为是 async wai ...
- DOM-based XSS Test Cases
Case 23 - DOM Injection via URL parameter (by server + client) https://brutelogic.com.br/dom/dom.php ...
- 2. [mmc subsystem] mmc core数据结构和宏定义说明
一.host相关 1.struct mmc_host struct mmc_host是mmc core由host controller抽象出来的结构体,用于代表一个mmc host控制器. 数据结构如 ...
- C#异步编程----Thread
一.问题由来 多线程能实现的基础: 1.CPU运行速度太快,硬件处理速度跟不上,所以操作系统进行分时间片管理.这样,宏观角度来说是多线程并发 ,看起来是同一时刻执行了不同的操作.但是从微观角度来讲,同 ...
- dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
- TensorFlow 2.0 Alpha pip安装指令
TensorFlow 2.0 Alpha目前已经可以通过pip安装,亲测有效,安装指令为: # 普通版本 pip install tensorflow==2.0.0-alpha0 # GPU版本 pi ...