react之redux增加删除数字
2024-08-28 12:13:00
比如在页面中添加和删除‘222’
action.js
export const ADD= 'ADD';
export const RED='RED';
export const add=(str)=>{
return{
type:'ADD',
payload:str
}
};
export const red=(str)=>{
return {
type:'RED',
payload:str
}
};
reducer.js
import {combineReducers} from 'redux';
import {ADD,RED} from '../action';
const initialState = {
cartData:["1","2","3"]
};
const cartReducer=(state=initialState,action)=>{
state = JSON.parse(JSON.stringify(state));//深拷贝数据
switch (action.type){
case ADD:
state.cartData.push('222');
return {cartData:state.cartData};
break;
case RED:
state.cartData.pop();
return {cartData:state.cartData}
default:
return state;
}
};
const reducer = combineReducers({
cartReducer
});
export default reducer;
addStr.js
import React,{Component} from 'react'
import { connect } from 'react-redux';
class AddStr extends Component{
constructor(props){
super(props)
}
render(){
const {cartData,addCartData}= this.props;
const datas=this.state.datas;
console.log(datas)
return(
<div className='adds'>
<ul>
{
cartData.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
<button onClick={()=>addCartData()}>添加字符</button>
</div>
)
}
}
function mapStateToProps(state) {
return{
cartData:state.cartReducer.cartData
}
}
function mapDispatchToProps(dispatch) {
return{
addCartData:()=>dispatch({type:'ADD'})
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(AddStr);
redStr.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class RedStr extends Component{
constructor(props){
super(props);
};
render(){
const {cartData,addCartData}= this.props;
return (
<div>
<button onClick={()=>addCartData()}>删除字符串</button>
</div>
)
}
}
function mapStateToProps(state) {
console.log(state.cartReducer);
return{
cartData:state.cartReducer.cartData
}
}
function mapDispatchToProps(dispatch) {
return{
addCartData:()=>dispatch({type:'RED'})
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(RedStr);
roots.js
import React, { Component } from 'react';
import AddStr from '../components/addStr'
import RedStr from '../components/redStr'
class Roots extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<AddStr/>
<RedStr />
</div>
)
}
}
export default Roots;
最新文章
- 1260: [CQOI2007]涂色paint
- sql字段中逗号分隔字符串的判断
- IDEA之maven（springmvc）项目
- bzoj 2809: [Apio2012]dispatching
- android——单点触控移动，多点触控放大缩小
- Cannot start service SPUserCodeV4 on computer
- oracle拼接字段用||
- easyui表单提交，后台获取不到值
- bzoj1684 [Usaco2005 Oct]Close Encounter
- 微信开放框架-UCToo
- php中empty和isset的区别
- 服务器Hadoop+Hive搭建
- 深入分析JavaWeb技术内幕（修订版）》【PDF】下载
- clang++ 链接问题 和 VS Code
- Java：并发不易，先学会用
- css的em是根据什么来写的
- Office Web Apps 2013 修改Excel在线查看文件大小限制
- 解决Visual Studio调试突然变慢卡死的问题
- Android中消息系统模型和Handler Looper
- 【HAOI2011】problem b