Redux简易理解
1. createStore(相当于vuex的$store)
这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样
作用:
创建一个 Redux store 来以存放应用中所有的 state。
应用中应有且仅有一个 store。
a.store构成
//发送action
store.dispatch(actions)
//获取数据
store.getState()
//订阅,更新数据到视图
store.subscribe(()=>{{})
console.log(store)
b. store例子
createStore import {createStore} from 'redux'
import reducer from './reducer' //第三步 的reducers
const store = createStore(reducer)
c. sate初始化数据
初始化数据state数据,一般设置为null,[],{}等,为reducer完成初始化工作。
const state = {
todos: [
{
id: 1,
title: "周四了"
},{
id: 2,
title: "马上周五了"
}
]
}
2. reducers (相当于vuex- mutations)
通过reuducer来操作数据
import state from './state'
import * as type from './type'
const reducer = (previousState = state ,action) => {
//new_state是state解构后的值,state值的初始化时不再会影响new_state。
//previousState 初始化数据state,将初始化的值存放在new_state中,不直接修改state中的值
let new_state = {
...previousState
}
//通过判断不同的reducers名,而vuex则更加简单
switch (action.type) {
case type.ADD_TODO_ITEM:
//这里修改的是新数据
new_state.todos.push({
id: getBiggerId(new_state.todos) + 1, //最大的id+1
title: action.payload
})
break;
default:
break;
}
//返回new_state必不可少
return new_state
}
//动态的获取state数组最大的id值
function getBiggerId(arr){
let new_arr = arr.slice()
if( !arr.length ) return 0
new_arr = new_arr.sort((a,b)=>{
return b.id - a.id //倒叙排,大的在前,小的在后
})
return new_arr[0].id
}
3. action Creators (相当于vuex-actions)
定义方法,发送action 到reducer
import * as type from './type'
import store from './index'
const actionCreators = {
//定义的方法
addTodoItem(payload){
//1. 创建一个动作
let action = {
type: type.ADD_TODO_ITEM,
payload
}
//2. 发送动作给 reducer
//1. Store,dispatch相当于vuex的this.$store 及commit
store.dispatch(action)
}
}
//暴露action
export default actionCreators
4. 视图层
1. 触发action方法
import React, {Component} from 'react'
import actionCreators from './../store/actionCreators';
class TodoInput extends Component{
let value = this.input.value
if( e.keyCode === 13 ){
//触发action中的addTodoItem方法
//通过直接引入actionCreators,(vuex是通过this.$store.dispatch(addTodoItem))
actionCreators.addTodoItem(value)
this.input.value = ""
}
}
}
2. 获取store数据和更新视图
添加一个变化监听器。每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。
import React, {Component} from 'react'
//此时是手动引入定义好的状况,不能全局共享
import store from '../store'
class TodoContent extends Component{
componentWillMount(){
//更新数据到视图
store.subscribe(()=>{
this.setState({
//获取store中的数据
todos: store.getState().todos
})
})
}
Redux简易理解的更多相关文章
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- Sql Jions 的简易理解
Sql Jions 的简易理解 Select * from TableA A left jion TableB B on A.key = B.key Select * from TableA ...
- redux的理解
Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...
- redux深入理解之中间件(middleware)
理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...
- 对于Redux的理解
在移动端项目,经常会在不同view中进行传递数据,事件.当事件比较少时,我们可以通过常规的事件流方法,注册,发布事件 进行响应等等.但是项目中一个事件多处响应时候,就会使程序变得相当复杂.在现在的Vu ...
- react中使用redux简易案例讲解
为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...
- fish redux 个人理解
fish redux 理解 fish redux是什么 Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用. 它的特点是配置式 ...
- JQuery OOP 及 OOP思想的简易理解
在项目维护的时候,看到通篇的function实际上是非常费(痛)劲(苦),个人对于前端也不是特别熟悉,就想着JQuery能否也建立OOP的写法? 目的便于日后代码维护管理,就算不为了自己,日后交接后也 ...
- Redux学习笔记:Redux简易开发步骤
该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...
随机推荐
- 《AndroidStudio每日一贴》5. 怎样高速查看某个方法/注解的定义?
操作方法: 使用快捷键 option + space 或 command + y 举个样例: 如以下的样例,我在输入@O的时候会出现代码补全列表,这个时候我想查看列表中项目的定义能够使用快捷键 opt ...
- Gym - 100338C Important Roads 最短路+tarjan
题意:给你一幅图,问有多少条路径使得去掉该条路后最短路发生变化. 思路:先起始两点求两遍单源最短路,利用s[u] + t[v] + G[u][v] = dis 找出所有最短路径,构造新图.在新图中找到 ...
- Sqoop Import原理和详细流程讲解
Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...
- SQL Server 2000数据库备份与恢复图解
SQL Server 2000数据库备份与恢复图解 四个步骤:1.安装sql server 2000 2.数据库设置: 3.建立自动备份 4.还原数据库 具体图片见附件 本文出自 "李 ...
- SQL一列的合并连起来
CREATE TABLE #temp( ID INT, name NVARCHAR(max), age int, address ) ) insert into #temp select ID, na ...
- 【Redis发布订阅】
Redis通过PUBLISH.SUBSCRIBE等命令实现发布与订阅模式. 举例:QQ群的公告,单个发布者,多个收听着. *** 发布/订阅 PUBLISH 频道 消息 将消息发布到指定的频道. . ...
- PHP定时执行任务
ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limit(0)可以让程序无限制的执行下去 $int ...
- Objective-C(十九、通知-消息发送模式之中的一个)——iOS开发基础
结合之前的学习笔记以及參考<Objective-C编程全解(第三版)>,对Objective-C知识点进行梳理总结. 知识点一直在变.仅仅是作为參考.以苹果官方文档为准~ 十九.通知-消息 ...
- jquery autocomplete文本自己主动补全
文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...
- 在resin配置參数实现JConsole远程监控JVM
在Resin配置參数实现JConsole远程监控JVM 在Resin中配置中配置下列參数,就能够是实现了! <jvm-arg>-Dcom.sun.management.jmxremote& ...