文档章节

Redux基础

星闪海洋
 星闪海洋
发布于 05/20 07:37
字数 564
阅读 7
收藏 0

Redux概念

Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中


Redux的工作流程


Antd的使用

安装:npm install antd --save

import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
<div style={{ margin: '10px 0 0 10px' }}>
    <Input style={{ width: '300px' }} />
    <Button type="primary">提交</Button>
    <List
        bordered
        dataSource={this.state.list}
        renderItem={item => (<List.Item>{item}</List.Item>)}
        style={{ width: '363.84px', marginTop: '5px' }}
    />
</div>

redux的使用

安装:npm install redux --save

1、创建store目录,并在此目录下创建index.js文件

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

2、创建reducer.js

const defaultState = {
    inputValue: '123',
    list: ['a', 'b']
}

export default (state = defaultState, action) => {
    return state
} //reducer可以接收state,但绝不能修改state

3、使用store

import store from './store'
console.log(store.getState())

action和reducer

1、组件派发action

handleInputChange(e) {
    const action = {
        type: 'change_input_value',
        value: e.target.value
    }
    store.dispatch(action)
} //store接收到action,将当前状态和action发送给reducer(内部自动触发)
//reducer是一个纯函数,给固定的输入就一定会有固定的输出(Date()就不行),而且不会有任何副作用(即不能改变参数的值)

2、reducer接收action,返回新状态

if (action.type === 'change_input_value') {
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
} //store接收到返回的新状态,更新state(内部触发)

3、组件订阅store,当store中的数据更新时,实现同步更新

this.handleStoreChange = this.handleStoreChange.bind(this)
store.subscribe(this.handleStoreChange)

handleStoreChange() {
    this.setState(store.getState())
}

使用ActionTypes统一管理action的type属性值

如果action的type属性值直接使用字符串,派发action的组件中和reducer中的值
都是以字符串给出的,若误写的不一致程序不会报错,bug难以排查。故使用常量,增强可维护性

//在store文件夹下创建actionTypes.js文件
export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_todo_item'
export const DEL_TODO_ITEM = 'del_todo_item'
//在组件或reducer中使用
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DEL_TODO_ITEM } from './actionTypes'

使用actionCreators统一创建action

让组件的代码更简洁,也方便测试和后期维护

//在store文件夹中创建actionCreators.js文件
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DEL_TODO_ITEM } from './actionTypes'
export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})
export const getAddItemAction = () => ({
    type: ADD_TODO_ITEM
})
export const getDelItemAction = (index) => ({
    type: DEL_TODO_ITEM,
    index
})
//在组件中使用
import { getInputChangeAction, getAddItemAction, getDelItemAction } from './store/actionCreators'
const action = getInputChangeAction(e.target.value)

© 著作权归作者所有

上一篇: Redux进阶
下一篇: React进阶
星闪海洋

星闪海洋

粉丝 0
博文 27
码字总数 13397
作品 0
深圳
私信 提问
让react用起来更得心应手——(react-redux)

让react用起来更得心应手系列文章: 让react用起来更得心应手——(react基础简析) 让react用起来更得心应手——(react-router原理简析) 让react用起来更得心应手——(react-redux原理简...

梦想攻城狮
2018/10/25
0
0
使用 redux-observable 实现组件自治

本文是 《使用 RxJS + Redux 管理应用状态》系列第一篇文章,旨在介绍 redux-obervable v1 版本为 React + Redux 带来的组件自治能力。 redux-observable 简介 redux-observable 是 redux 一...

吴晓军
2018/08/19
0
0
精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家
2016/05/25
0
0
阿里开源组装式 Flutter 应用框架 Fish Redux

近日,阿里开源了其 Flutter 应用框架 Fish Redux。 Fish Redux 是一个基于 Redux 数据管理的组装式 Flutter 应用框架,它特别适用于构建中大型的复杂应用。 特性包括: 函数式编程 可预测的...

h4cd
03/08
0
0
redux 时间旅行,你值得拥有!

啥叫时间旅行? 顾名思义,就是可以随时穿越到以前和未来,让应用程序切换到任意时间的状态。我们都知道,一般应用状态都很复杂,创建、维护、修改和弄明白有哪些行为会影响状态都不是一件容...

wuyafeiJS
2018/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux 性能分析利器 -火焰图 flame graph

简述 Perf 命令(performance的简写)是 Linux 系统原生提供的性能分析工具,返回 CPU 正在执行的函数名以及调用栈(stack)。 通常,它的执行频率是 99Hz(每秒99次),如果99次都返回同一个函数...

呼呼南风
24分钟前
4
0
 好程序员大数据知识点精讲 大数据之Linux

好程序员大数据知识点精讲 大数据之Linux -Linux是什么? Linux是一套作业系统,不是应用程序Linux的基本思想有两点:第一,一切都是文件;第二,每个软件都有确定的用途。 Shell——命令行解...

好程序员IT
29分钟前
1
0
mysql 多行结合

select a1.email as email ,a1.bg ,IFNULL(a1.bg, a2.bg) from ( select * from test01 where sdate = '2019-09-11' ) a1 LEFT join (select * from test01 where sdate = '2019-09-10') a2 ......

昏鸦
30分钟前
2
0
Netflix Eureka 续约 & 更新注册表信息

Eureka Client 要定期的向 Eureka Server 发送心跳请求以保持续约的状态。 也需要定期的从 Eureka Server 获取服务注册表数据,并将服务注册表数据缓存在客户端实例内。 Eureka Client 续约 ...

BryceLoski
34分钟前
19
0
IT兄弟连 Java语法教程 Java开发环境 JVM、JRE、JDK

要想开发Java程序,就需要知道什么是JVM、JRE以及JDK。JVM是运行Java程序的核心,JRE是支持Java程序运行的环境,而JDK是Java开发的核心,下面我们分别具体介绍它们以及它们之间的关系。 1.J...

老码农的一亩三分地
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部