一、效果图
二、组件间的关系说明
三、源代码
3.1 CountReducer
import { createActions, handleActions, combineActions } from 'redux-actions'
import { INCREMENT, DECREMENT } from '../../utils/constant'
export const { increment, decrement } = createActions({
[INCREMENT]: (amount = 1) => amount,
[DECREMENT]: (amount = 1) => -amount
})
export const asyncIncrement = (amount=1,timeout)=>{
return (dispatch) => {
setTimeout(() => {
dispatch(increment(amount))
}, timeout)
}
}
const defaultState = 0;
export const countReducer = handleActions({
[combineActions(increment, decrement)]: (
state,
{ payload: amount }
) => {
return state + amount
}
}, defaultState)
3.2 PersonReducer
import { createAction, handleAction } from 'redux-actions'
import { ADD_PERSON } from "../../utils/constant"
export const addPerson = createAction(ADD_PERSON)
const defaultState = []
export const personReducer = handleAction(
addPerson,
(state, { payload: person }) => {
return [...state, person]
},
defaultState)
3.3 store.js
import { createStore, applyMiddleware, combineReducers,compose } from 'redux'
import thunk from 'redux-thunk'
import { countReducer } from './count'
import { personReducer } from './person'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default createStore(combineReducers({
count: countReducer,
persons: personReducer
}), composeEnhancers(applyMiddleware(thunk)))
3.4 Count组件
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment, decrement, asyncIncrement } from '../../redux/count'
class Count extends Component {
state = { number: 1 }
handleIncrement = () => {
const { number } = this.state
this.props.increment(+number)
}
handleDecrement = () => {
const { number } = this.state
this.props.decrement(+number)
}
handleOddIncrement = () => {
const { counter } = this.props
const { number } = this.state
if (counter % 2 === 0) {
alert('数据不符合')
return
}
this.props.increment(+number)
}
handleAsyncIncrement = () => {
const { number } = this.state
this.props.asyncIncrement(+number, 500)
}
handleSelect = (event) => {
this.setState({ number: event.target.value })
}
render() {
const { counter,personLength } = this.props
return (
<>
<h2>{counter},数组添加了几个人:{personLength}</h2>
<select
onChange={this.handleSelect}
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick={this.handleIncrement}>+</button>
<button onClick={this.handleDecrement}>-</button>
<button onClick={this.handleOddIncrement}>奇数相加</button>
<button onClick={this.handleAsyncIncrement}>异步相加</button>
</>
)
}
}
export default connect(
state => ({
counter: state.count,
personLength: state.persons.length
}),
{
increment,
decrement,
asyncIncrement
})(Count)
3.5 Person组件
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/person'
class Person extends Component {
state = { person: {} }
handAddPerson = ()=>{
const name = this.nameNode.value
const {addPerson} = this.props
addPerson({name})
this.nameNode.value=""
}
render() {
const { counter,persons } = this.props
return (
<div>
<h2>当前count的值是::{counter}</h2>
<input type="text" ref={c=>this.nameNode = c}/>
<button onClick={this.handAddPerson}>添加</button>
<ul>
{
persons.map(({name},index)=><li key={index}>{index}==={name}</li>)
}
</ul>
</div>
)
}
}
export default connect(
state => ({
counter: state.count,
persons: state.persons
}),
{
addPerson
}
)(Person)