React 使用Redux进行任意组件间通信

最新推荐文章于 2024-05-04 01:22:12 发布

ai_365

最新推荐文章于 2024-05-04 01:22:12 发布

阅读量181

点赞数 3

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/ai_365/article/details/137589746

版权

本文详细介绍了如何在React应用中使用Redux库创建store仓库，包括reduce函数定义状态修改、store的dispatch用于触发事件和subscribe监听状态变化。同时展示了事件触发端和接收端的实现方式。

摘要由CSDN通过智能技术生成

定义store仓库

// 引入createStore
import {createStore} from 'redux'

// 定义修改器
// state表示当前状态
// action表示携带通信数据的事件
function reduce(state,action){
    // 数据改变了，被赋予了事件的新值payload
    // payload命名只是习惯，可以是其它名称
    state.data = action.payload
    // 返回一个新的状态
    return state
} 

// 传入修改器定义中心仓库Store
// 第二个参数表示state初始值
// 注意，一定要定义初始值
const store = createStore(reduce,{data:''})

export default store

// Store和state的区别：
// Store是仓库对象
// state是仓库对象的某一时刻的数据快照

// Store的三大核心用法:
// dispatch()
// subscribe()
// getState()

##事件触发端

import Store from "./定义Store仓库";


export default ()=>{

    
    function handler(event){
        // 只要输入框内容改变就会触发，输入内容作为action的payload
        Store.dispatch({type:'msg',payload:event.target.value})
    }
    return <>
        <h2>事件触发端：</h2>
        请输入:<input autoFocus id="input" onInput={handler}/><br/>
    </>
}

事件接收端


import { useState } from "react";
import Store from "./定义Store仓库";

const style={
    width:'300px',
    height:'100px',
    background:'hsl(90,50%,90%)',
    padding:'10px',
}

export default ()=>{
    const [info,setInfo] = useState('')

    // 中心仓库监听变化，一旦数据更新则执行函数
    // getState()方法获取最新的数据
    Store.subscribe(()=>setInfo(Store.getState().data))
    return <>
        <h2>事件接收端：</h2>
        <div style={style}>{info}</div>
    </>
}