该源代码来源于网络:
zXq易塔云建站-模板下载,web开发资源,技术博客先看效果
zXq易塔云建站-模板下载,web开发资源,技术博客
zXq易塔云建站-模板下载,web开发资源,技术博客zXq易塔云建站-模板下载,web开发资源,技术博客index.js
import {createStore} from 'redux'
import { Counter, MakeMoney, SpendMoney } from './redux/Redux2/Counter'
import App from './redux/Redux2/App'
const store = createStore(Counter);
function render1() {
ReactDOM.render(
<App store={store} MakeMoney={MakeMoney} SpendMoney={SpendMoney}/>,
document.getElementById('root')
)
}
render1();
//重新渲染render,store去订阅render
store.subscribe(render1)
App.js
import React, {Component} from 'react'
import {Button} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css'
export default class App extends React.Component {
render() {
//属性获取可以直接用
const store = this.props.store;
//获取当前状态
const money = store.getState();
//获取方法
const MakeMoney = this.props.MakeMoney;
const SpendMoney = this.props.SpendMoney;
return (
<div>
<h1 align='center'>现在手里有{money}块钱</h1>
<Button type='primary' onClick={() => store.dispatch(MakeMoney())}>赚钱</Button>
<br/>
<Button type='primary' onClick={() => store.dispatch(SpendMoney())}>花钱</Button>
</div>
)
}
}
Counter.js
const makeMoney = "赚了1块钱";
const spendMoney = "花了1块钱";
//状态管理
export function Counter(state = 0, action) {
switch (action.type) {
case makeMoney:
return state + 1;
case spendMoney:
return state - 1;
default:
//初始状态
return 10;
}
}
//action creator 创建action
export function MakeMoney() {
return {type:makeMoney}
}
export function SpendMoney() {
return {type:spendMoney}
}
由于这段代码对store,reducer,action的概念分不清,特地重写了这段代码,点击切换。