react框架实现点击事件计数小案例

Posted 2021-01-03 dark-fire-liehuo

代码块：

import React from ‘react‘;

import ReactDOM from ‘react-dom‘;

import ‘./index.css‘;

// import App from ‘./App‘;

import {BrowserRouter as Router,Route,Link} from ‘react-router-dom‘

import { createStore } from ‘redux‘

// import store from ‘./store.js‘

import { Provider,connect } from ‘react-redux‘

// import Page3final from ‘./Page3‘;

// as的作用，另外取名 Router = BrowserRouter

class Counter extends React.Component {

render() {

// const { value, onIncreaseClick } = this.props

const value = this.props.value

//value是计的数，实际上store.state通过props来进行传递到组件

const onIncreaseClick = this.props.onIncreaseClick

//onIncreaseClick，这个方法也是通过props传入进来，这个函数执行1次，那么这个value值+1

console.log(this.props)

return (

 

<div>

<span>{value}</span>

{/* <span>{this.props.value}</span> */}

<button onClick={onIncreaseClick}>Increase</button>

</div>

)

}

}

const increaseAction={type:‘increase‘} //此对象有一个type属性

//reduce函数，这个函数最终决定state如何更改内容，而且每一次如果要更新视图

//那么state都要全新更新一个对象

// reducer函数，这个函数最终决定state如何更改内容，而且每一次如果要更新试图，那么state都要全新的1个对象

var initState = { count: 0 }

// 初始状态为initState，根据action的不同值（类型）执行不同的内容

function counter(state = initState, action) {

const count = state.count

// action.type表示动作的类型

switch (action.type) {

// case ‘increase‘:表示动作的类型为increase

case ‘increase‘:

// state.count++

// console.log(state)

return { count: count + 1 }

// 如果以上动作类型都不是，则返回最初状态

default:

return state

}

}

//实例化仓库对象，需要决定状态如何变更的函数，该仓库管理状态

console.log(createStore)

const store = createStore(counter)

//将状态绑定到props的方法

//传入一个state值进来，然后返回一个对象绑定到props里

function mapStateToProps(state) {

return {

value: state.count

}

}

//将触发更改状态的方法绑定到(组件上)props

//首先传入dispatch进行触发

function mapDispatchToProps(dispatch){

// 返回方法的内容，返回的内容都会被绑定到props上

return{

// ()=>dispatch(increaseAction)这个函数具有dispatch方法

//dispatch则调用counter函数然后将

//const increaseAction = { type: ‘increase‘ } 获取的类型进行下一步

// onIncreaseClick:()=>dispatch(increaseAction)

onIncreaseClick:function(){//以上写法相当于这个写法

dispatch({type:‘increase‘})

}

}

}

// Action Creator

// const increaseAction = { type: ‘increase‘ } //此对象有一个type属性

// function mapDispatchToProps(dispatch) {

// return {

// // onIncreaseClick: () => dispatch(increaseAction)

// onIncreaseClick:function(){

// dispatch({type:‘increase‘})

// }

// }

// }

//connect方法给Counter组件的props传入

//state（mapStateToProps,）以及更改state的方法（mapDispatchToProps）

//此处connect表示方法，连接

const App = connect(

//两个函数作为一个参数传入，然后以函数传入到组件Counter，

//再实例化一个App

mapStateToProps,

mapDispatchToProps

// 此处的Counter表示组件

)(Counter)

ReactDOM.render(

// 再将App和store注入进来

<Provider store={store}>

<App />

</Povider>,

document.getElementById(‘root‘)

);