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 ...
随机推荐
- Java中发送http的get、post请求
近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...
- UvaLive 6600 Spanning trees in a secure lock pattern 矩阵行列式
链接:https://icpcarchive.ecs.baylor.edu/index.php? option=com_onlinejudge&Itemid=8&page=show_p ...
- ubuntu下安装RemixOS双系统(Android x86)
这篇文章主要讲在怎样在ubuntu下安装RemixOS pc版(Android x86版本号),下面两种做法的思路都适合安装不论什么版本号的Android x86版本号到ubuntu系统上,仅仅须要改 ...
- Python: PS 图层混合算法汇总
本文用 Python 实现了PS 中的图层混合算法,把很多常见的图层混合算法都汇总到了一起,比起以前写的算法,就是用矩阵运算代替了很耗时的for 循环,运行效率有所提升.具体的代码如下: import ...
- spring mvc获取路径参数的几种方式
一.从视图向controller传递值, controller <--- 视图 1.通过@PathVariabl注解获取路径中传递参数 (参数会被复制到路径变量) @RequestMappin ...
- Controller接口控制器2
5.ServletForwardingController 将接收到的请求转发到一个命名的servlet,具体示例如下: package cn.javass.chapter4.web.servlet; ...
- 【基础篇】Android手动卸载虚拟机程序
adb shell (进入模拟器自带的操作系统) cd data/app (切换到apk的安装目录) rm apk文件全称 例 : rm com.test.TestActivity.apk (手动删除 ...
- Java:JDBC操作
内容:供程序员调用的接口与类,集成在java.sql和javax.sql包中,如:DriverManager类Connection接口Statement接口ResultSet接口 1.Class.fo ...
- Mysql source导入.sql文件深坑!
刚刚接手一个项目,给老系统加功能.把数据库考出来一个.sql文件就170多M. 使用mysql命令行source 我的.sql文件. 导了一宿都没导完,然后发现里面的数据怎么是乱码呢.. 崩溃额,在排 ...
- 关于Echarts表格插件的使用
<template> <div :style="{height:height,width:width}"></div> </templat ...