react结合 antd redux的简单使用
时间:2020-04-20
本文章向大家介绍react结合 antd redux的简单使用,主要包括react结合 antd redux的简单使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
// AntdTest 测试 redux 组件
// 在src/index.js文件中 import 'antd/dist/antd.css' 安装 antd 的命令 npm install antd --save
import React, { Component } from 'react'
import { Button, Pagination, List, Input } from 'antd';
import store from '../store'
export default class AntdTest extends Component {
constructor(props) {
super(props)
console.log(store, 'store')
this.state = store.getState();
store.subscribe(this.storeChange) // 订阅 Redux的状态---> 解决store里的数据已经更新了,但是组件还没有进行更新
console.log(this.state)
}
// 输入框 change 事件
changeValue = e => {
// console.log(e.target.value);
const action = {
type:'changeInput',
value:e.target.value
}
store.dispatch(action)
}
// 更新store
storeChange = () => {
this.setState(store.getState())
}
// 添加条目功能
addItem = () => {
const action = { type:'addItem'}
store.dispatch(action)
}
// 删除条目功能
deleteItem = (index) => {
console.log(this,'this')
const action = {
type:'deleteItem',
index
}
store.dispatch(action)
}
// 渲染函数
render() {
return (
<div className="antd-box">
<div>store里面的数据name:{this.state.name}</div>
<Input
placeholder='请添加'
style={{ width:'250px', marginRight:'10px'}}
onChange={this.changeValue}
/>
<Button type="primary" onClick={this.addItem}>添加条目</Button>
<div style={{margin:'10px',width:'300px'}}>
<List
bordered
dataSource={this.state.testList}
renderItem={(item, index)=>(<List.Item onClick={(index) => this.deleteItem(index)}>{item}</List.Item>)}
/>
</div>
<Pagination defaultCurrent={1} total={50} />
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="link">Link</Button>
</div>
)
}
}
// store/index文件 如果你要使用中间件,就必须在redux中引入applyMiddleware
import { createStore, applyMiddleware, compose } from 'redux';
// import thunk from 'redux-thunk'
import reducer from './reducer'
import mySaga from './mySaga'
import createSagaMiddleware from 'redux-saga' //引入saga
const sagaMiddleware = createSagaMiddleware(); //创建saga中间件
// 使用Chrome浏览器安装插件,在浏览器右上角有三个点,然后点击"更多工具",再点击"扩展程序",再点击右侧的"打开Chrome网上商店",然后搜索Redux DevTools 直接安装;(翻墙工具)
// 配置Redux Dev Tools插件 控制台调试仓库数据
// const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// redux-thunk 要和 Redux Dev Tools插件一并使用了,需要使用增强函数。使用增加函数前需要先引入compose
// Redux的中间件 redux-thunk Redux-saga
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
// const enhancer = composeEnhancers(applyMiddleware(thunk)) // 如果你想用 redux-thunk
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware)) // 如果你想用 redux-saga
const store = createStore(reducer, enhancer) // 创建数据存储仓库
// then run the saga
sagaMiddleware.run(mySaga)
export default store
// 官方写法
// const store = createStore(
// reducer,
// applyMiddleware(thunk)
// )
// store/reducer.js 文件 默认数据 Reducer里只能接收state,不能改变state
const initState = {
testList:[
'vue',
'react'
],
inputValue: '请输入内容',
name: 'redux'
}
// state: 指的是原始仓库里的状态。
// action: 指的是action新传递的状态
// Reducer里编写业务逻辑
export default (state = initState, action) => { //就是一个方法函数
console.log(state,'redux-state',action,'redux-action')
if (action.type === 'changeInput') {
let newState = JSON.parse(JSON.stringify(state)) // 深度拷贝state
newState.inputValue = action.value
return newState
}
//根据type值,编写业务逻辑
if (action.type === 'addItem' ) {
let nState = JSON.parse(JSON.stringify(state)) // 新增
console.log(nState,'nState')
nState.testList.push(nState.inputValue);
// nState.inputValue = '';
return nState
}
if (action.type === 'deleteItem' ) {
let newState = JSON.parse(JSON.stringify(state))
newState.testList.splice(action.index,1) //删除
return newState
}
return state
}
原文地址:https://www.cnblogs.com/lhl66/p/12736057.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)C. The Phone Number
- Codeforces Beta Round #3 C. Tic-tac-toe
- [记录] 数据库中,根据经纬度,查询距离最近的地点
- PAT (Basic Level) Practice (中文)1010 一元多项式求导 (25 分)
- R语言随机森林模型中具有相关特征的变量重要性
- PAT (Basic Level) Practice (中文)1009 说反话 (20 分)
- Codeforces Beta Round #8 A. Train and Peter
- Codeforces Round #559 (Div. 2)B. Expansion coefficient of the array
- Codeforces Beta Round #72 (Div. 1 Only)B. Doctor
- pygame游戏常用方法
- node-blog:用 node 搭建的个人开源博客
- 2018-2019 ICPC, NEERC, Southern Subregional Contest D. Garbage Disposal
- 「查缺补漏」JavaScript执行上下文-执行栈
- 树状数组 _ 求逆序数
- PAT (Basic Level) Practice (中文)1012 数字分类 (20 分)