redux.js的基本使用
1、先是安装reduxJx, cnpm i --save rudux
2、创建一个store的js文件
3、使用import来引用 redux import { createStore } from 'redux'
4、然后在store 创建一个全局管理数据对象 const preloadState = {
cartList: []
}
5、处理全局数据的方法
const reducer = function(state, action){
// 参数state:上一次的state状态
// 参数action:事件描述对象
console.log(action.type);
处理数据方法
if (item.a === 0 ){
...代码
} //返回下一次全局使用的state状态
return state;
}
//创建仓库
const store = createStore(reducer, preloadState);
export default store
6、dispatch的使用
在store以外 store.dispatch()调用 参数1:设置store里面的action相对的type值,参数2:传递的数据
如下: store.dispatch({
type: 'add',
value: {
id: 2
}
})
然后在store里面的action里面可以获取到 type和传入的value值,也可以在全局管理数据中的state改变全局的数据
7、在组件(页面)中也可以通过store. getState()来获取你存储的相对应的值,
8、store.subscribe()的操作是基本用来监听 store里面的一些数据变化进行操作的,需要主要的是dispatch的操作顺序,
还有一些步骤操作没有具体说,
redux.js的基本使用的更多相关文章
- 配置react, redux, next.js环境
1. react https://reactjs.org/docs/add-react-to-a-new-app.html npm install -g create-react-app create ...
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- Redux教程3:添加倒计时
前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...
- Redux教程1:环境搭建,初写Redux
如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...
- Redux教程2:链接React
通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习R ...
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- 学 Redux (转)
0.官方文档:http://redux.js.org/ 中文版本 : http://cn.redux.js.org/ 中文版本(好!): http://www.css88.com/react/d ...
- redux学习笔记
中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...
- [转] What is the point of redux when using react?
As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...
随机推荐
- 搭建直播服务器,使用nginx与nginx-rtmp-module搭建流媒体服务器;
现在,一起学习一下如何自己搭建一个流媒体服务器吧! 本次搭建流媒体使用的环境是centos 7.0+nginx: 让我们一起开始奇妙的流媒体之旅吧! 1.下载nginx-rtmp-module: ng ...
- C++之ARX,Acstring,ACahr转char
AcDbText* pText = AcDbText::cast(pEnt); AcString sText = DBHelper::AcStringFree(pText->textString ...
- Xcode10 import导入文件的坑
更新了10.0的Xcode,踩了两个坑,记录一下. #import "" 双引号内输入任何字符 都会导致Xcode崩溃 解决方案: target - buildSettings - ...
- idea建立maven聚合项目 标签: mavenidea 2017-01-08 15:33 2477人阅读 评论(30)
上篇文章写了如何用idea建立maven项目,idea建立maven聚合项目我感觉不如eclipse方便,不过并不是没有办法,下面写一下这个小教程. 建立maven project 建立maven p ...
- Skiing 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛H题(拓扑序求有向图最长路)
参考博客(感谢博主):http://blog.csdn.net/yo_bc/article/details/77917288 题意: 给定一个有向无环图,求该图的最长路. 思路: 由于是有向无环图,所 ...
- VSCode 设置 CPP 代码风格
VSCode 设置 CPP 代码风格 按 Ctrl+, 打开设置,输入 format 找到. { BasedOnStyle: Google, IndentWidth: 4 }
- @loj - 2250@ 「ZJOI2017」仙人掌
目录 @题目描述@ @solution@ @accepted code@ @details@ @题目描述@ 如果一个无自环无重边无向连通图的任意一条边最多属于一个简单环,我们就称之为仙人掌.所谓简单环 ...
- Intellj IDEA14上用Debug启动项目启动不了:Unable to open debugger port: java.net.SocketException "socket closed"
详情见上图更清晰 15:11:10 Application Server was not connected before run configuration stop, reason: Unable ...
- laravel 5.6接入微信第三方授权登陆的主要步骤
https://yq.aliyun.com/articles/590435 摘要: 这方面,php已很成熟了, 综合下面这个链接,基本上调试一下就可以搞定了. 这方面,php已很成熟了, 综合下面这个 ...
- winform(C#)里弹出“确定”“取消”对话框
//消息框中需要显示哪些按钮,此处显示“确定”和“取消” MessageBoxButtons messButton = MessageBoxButtons.OKCancel; //"确定要退 ...