Redux combines React to implement Counter (can be compared with the previous article)
Look at the effect first
When you click +, the value will increase by 1
When-is clicked, the value is reduced by 1
When you click Increment if odd, it will judge whether the state in the current store is not an even number, if it is not an even number, add 1 to it, otherwise it will have no effect
The first click, no effect
When it is added to 1, click it again, then add 1.
When click Increment async, it will execute asynchronously, and the timer will execute once and add 1 after one second.
General catalog of documents
Code example
package.json (configuration file)
src/reducers/index.js
export default (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
src/components/Counter.js
import React, {
Component } from 'react'
import PropTypes from 'prop-types'
class Counter extends Component {
constructor(props) {
super(props)
this.incrementAsync = this.incrementAsync.bind(this);
this.incrementIfOdd = this.incrementIfOdd.bind(this);
}
incrementIfOdd() {
if(this.props.value % 2 !== 0) {
this.props.onIncrement()
}
}
incrementAsync() {
setTimeout(this.props.onIncrement, 1000)
}
render() {
const {
value, onIncrement, onDecrement } = this.props
return (
<p>
Clicked: {
value } times
{
' '}
<button onClick={
onIncrement}>
+
</button>
{
' '}
<button onClick={
onDecrement}>
-
</button>
{
' '}
<button onClick={
this.incrementIfOdd}>
Increment if odd
</button>
{
' '}
<button onClick={
this.incrementAsync}>
Increment async
</button>
</p>
)
}
}
Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired
}
export default Counter
note
Here we use prop-types to detect props data type
1. Why use prop-types
In multi-person development, when someone uses a self-defined component, the type may be incorrectly passed. If you add prop-types to your component, he can check the props from the parent component. If What I want to pass in the parent component is the string type '3', and a numeric type 3 is passed. If there is no type check, the system will not give you a prompt, but after the type check, the console will give you a type transfer error Tips. This way you can find errors quickly at work
Two, installation and introduction
//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';
3. Types that can be detected
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol
Four, use isRequired to set the attribute to the value that must be passed
Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired
}
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {
createStore } from 'redux'
import counter from './reducers'
import Counter from './components/Counter'
const store = createStore(counter)
const rootEl = document.getElementById('root')
const render = () => ReactDOM.render(
<Counter
value = {
store.getState()}
onIncrement = {
() => store.dispatch({
type: 'INCREMENT' })}
onDecrement = {
() => store.dispatch({
type: 'DECREMENT' })}
/>,
rootEl
)
render()
store.subscribe(render)
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redux Counter Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html>