Redux,React-Redux简单示例
程序员文章站
2022-07-03 17:33:51
...
Redux,React-Redux简单示例
Counter示例
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from "./components/App/App";
import {Provider} from "react-redux";
import store from "./store";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App/>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
//store/index.js
import { createStore } from 'redux'
import reducer from './reducers/index'
const store = createStore(reducer)
export default store
//reducers
export default (state = 1, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
//app.jsx
import React,{Component} from 'react';
import './App.css';
import Counter from "../Counter/Counter";
import store from "../../store";
import { connect } from 'react-redux'
class App extends Component{
constructor(props) {
super()
}
onIncrement=() =>{
console.log("INCREMENT")
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState())
}
onDecrement=() =>{
console.log("DECREMENT")
store.dispatch({ type: 'DECREMENT' })
console.log(store.getState())
}
render() {
return <Counter value={store.getState()}
onIncrement={this.onIncrement}
onDecrement={this.onDecrement}/>
}
}
export default connect(state => state)(App)
//counter.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Counter extends Component {
constructor(props) {
super();
}
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
上一篇: Win10系统应用商城下载记录怎么删除?