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 ...
随机推荐
- 遇到 Form 性能问题怎么办 performance issue
性能问题是比較复杂的问题. 一般由performance team 负责, 可是常见的情况是, 我们 INV team 定义的 view 不好, 导致查询性能较差. 这个必须由产品组和 perform ...
- TCP/IP具体解释--TCP的分段和IP的分片
写在前面: 分组能够发生在运输层和网络层.运输层中的TCP会分段,网络层中的IP会分片.IP层的分片很多其它的是为运输层的UDP服务的,因为TCP自己会避免IP的分片,所以使用TCP传输在IP层都不会 ...
- style="background-image: url(__HOMEPAGE__/views/IMJ2V2/images/banner2.jpg)"
style="background-image: url(__HOMEPAGE__/views/IMJ2V2/images/banner2.jpg)" 一.问题 backgroun ...
- 安装配置FreeBSD9全过程体验
安装配置FreeBSD9全过程体验(时长11分钟) 总所周知,FreeBSD是一个高效.稳定的UNIX操作系统.在今年年初,FreeBSD 又发布了9.0版本,它将采用全新的文本安装器,升级ZFS文件 ...
- display,visibility,meta知识
<div style="display:">显示</div><div style="display:none;">隐藏不占位 ...
- css3 scale的用法例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SQL函数-str()
1 str()函数用于将数值类型数据转换未字符类型. 2 str()函数语法 select str(数字类型的表达式[,表达式总长度][,小数点后面的位数]) 表达式总长度和小数点后面的位数为可选择参 ...
- useradd
功能说明:useradd命令可用于创建新的用户或者更改用户的信息. 语法格式:useradd [选项] [用户名]useradd -D [选项] 选项说明:1.使用useradd常规添加用户工作原理流 ...
- javaScript 对象学习笔记
javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...
- VS Code在本地进行调试和打开本地服务器
进行本地调试 1.在扩展中搜索插件 Debugger for Chrome 进行安装.我已经进行了安装,就没有出现安装字样. 2.配置launch.json文件,根据步骤来.file就是你在浏览器中需 ...