十 react-redux 发送爱心 综合小案例

数据流程图：

步骤流程

目录结构：

代码： src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/pages/boy/index.js

import React from "react"

import  boydefaultImg from '../../assets/images/1default.png'
import  activeImg from '../../assets/images/2active.png'
import {connect} from "react-redux"

class Boy extends React.Component{
        state={
            isActive:false
        }
        sendLove = ()=>{
            let {isActive} = this.state
            isActive ? this.props.stopLove() : this.props.sendLoves()
            this.setState({
                    isActive:!isActive
            })
        }

render(){
    return(
        <div>
            <img src={this.state.isActive ? activeImg : boydefaultImg }></img>
            <div>
                <button onClick={this.sendLove}>{this.state.isActive ? '暂停发送' : '点我发送'}
                </button>
            </div>
        </div>
    )
}

}
const mapDispatchToProps = (dispath) =>{
    return {
        sendLoves:()=>{
            dispath({type:'send_love'})
        },
        stopLove:()=>{
            dispath({type:'stop_love'})
        }
    }
}
export default connect(null,mapDispatchToProps)(Boy) 

src/pages/girl/index.js

import React from 'react'

import  girldefault from '../../assets/images/3girldefault.png'
import  activeImg from '../../assets/images/4girlactive.png'
import {connect} from 'react-redux'
class Girl extends React.Component{
render(){
    console.log(this.props);
    return(
        <div>
            <img src={this.props.status? activeImg:girldefault}></img>
        </div>
    )
}
}
const mapStateToProps = (state)=>{
   return state
}
export default connect(mapStateToProps)(Girl)

love-demo\src\pages\reducer\index.js

const initState = {
        status:false
}
exports.loveReducer = (state=initState,action) =>{
        switch (action.type) {
                case 'send_love':
                        return {
                                status:true
                        }
                case 'stop_love':
                        return {
                                status:false
                        }
                default:
                        return state
        }

}

love-demo\src\pages\store\index.js

import { createStore } from 'redux';
import {loveReducer} from '../reducer'

export default createStore(loveReducer)