gpt4 book ai didi

javascript - 如何使用 React-Redux 模拟事件?

转载 作者:搜寻专家 更新时间:2023-11-01 05:28:45 25 4
gpt4 key购买 nike

我正在使用 React 和 Electron 构建桌面应用程序。由于它发展迅速,我意识到我需要某种状态管理,如 Redux,以避免在组件之间传递许多属性。我开始阅读 Redux 官方 documentation但在我的案例中仍然无法弄清楚如何实现它。我卡住了!

例如,我有一个主要的 App 组件,它呈现许多子组件。其中一个有一个按钮。单击时,它应该向商店发送一个“事件”,以便主 App 可以采取相应行动。我怎样才能做到这一点?我找不到事件的概念,而且我什至在如何开始使用 Redux 时遇到了瓶颈。

为什么要举办事件?因为在这种情况下发送操作和修改应用程序状态对我来说似乎很愚蠢。我只想通知根组件根据用户操作分派(dispatch)一个操作。用户与展示组件交互,该展示组件应告知容器组件进行 API 调用或开始捕获音频/摄像头等。

据我所知,实现这一点的唯一方法是改变状态,让另一个监听变化的组件检测到一个特殊值,意思是“嘿,让我们这样做”,然后再次改变状态说“嘿,我正在做这个”,当它完成时,状态再次改变为“嘿,完成了”。

有人能给我指出正确的方向吗?

最佳答案

User interacts with a presentational component that should tell a container component to make an API call or start capturing audio/camera for example.

也许您的容器组件做的比它应该做的更多。考虑 React 组件只做两件事的情况:

  1. 根据 props 显示 DOM 元素
  2. 处理用户输入(调度事件)

如果您没有使用 redux 并且想在单击按钮时进行 API 调用,那可能看起来像这样:

class App extends Component {
state = { data: {} }

makeAPICall() {
fetch(url).then(data => this.setState({ data }))
}

render() {
<Child
data={this.state.data}
makeAPICall={this.makeAPICall}
/>
}
}

let Child = ({ data, makeAPICall }) => (
<button onClick={makeAPICall}>Call API!</button>
)

App 组件负责存储全局状态和处理事件,但我们必须通过组件树传递该状态和 App 的处理程序,很可能通过本身永远不会使用这些 props 的组件.

通过添加 Redux,您的应用程序现在可以更好地处理 API 调用或打开相机等副作用。中间件!

让这个(蹩脚的)插图帮助您:

enter image description here

因此,现在您的 App 组件可以像所有其他组件一样只是一个普通的展示组件,仅根据商店 Prop 显示数据并在需要时处理任何用户输入/调度操作。让我们使用 thunk 中间件

更新上面的示例
// actions.js
export let makeAPICall = () => {
return dispatch => {
fetch(url).then(data => dispatch({
type: 'API_SUCCESS',
payload: data,
})).catch(error => dispatch({ type: 'API_FAIL', payload: error }))
}
}

// Child.js
import { connect } from 'react-redux'
import { makeAPICall } from './actions'

let Child = ({ dispatch }) => (
<button onClick={() => dispatch(makeAPICall())}>Call API!</button>
)

export default connect()(Child)

以这种方式思考 React 应用程序非常强大。关注点分离非常好。组件显示内容并处理事件。中间件会处理任何副作用(如果需要的话),而存储只是一个对象,它会在数据发生变化时导致 React 重新渲染。

更新:“模态问题”

React 应用程序可能有一些全局的东西,比如模式和工具提示。不要考虑“打开模态”事件。想想“当前模态内容是什么?”。

模态设置可能看起来像这样:

// modalReducer.js
function reducer (state = null, action) {
if (action.type === 'UPDATE_MODAL') {
return action.payload
}

// return default state
return state
}

// App.js
let App = connect(state => ({ modal: state.modal }))(
props =>
<div>
<OtherStuff />
<Modal component={props.modal} />
</div>
)

// Modal.js
let Modal = props =>
<div
style={{
position: 'fixed',
width: '100vw', height: '100vh',
opacity: props.component ? 1 : 0,
}}
>
{props.component}
</div>

// Child.js

let Child = connect()(props =>
<button onClick={e =>
dispatch({
type: 'UPDATE_MODAL'
payload: <YourAwesomeModal />
})
}>
Open your awesome modal!
</button>
)

这只是一个示例,但效果会很好!当 state.modalnull 时,您的 Modal 不透明度为 0,不会显示。当您分派(dispatch) UPDATE_MODAL 并传入一个组件时,模态将显示您分派(dispatch)的任何内容并将不透明度更改为 1,以便您可以看到它。稍后您可以分派(dispatch) { type: 'UPDATE_MODAL', payload: null } 来关闭模式。

希望这能给您一些思考!

绝对 read this answer by Dan .他的方法类似,但存储模态“元数据”与组件本身相比更适合时间旅行等 Redux 幻想。

关于javascript - 如何使用 React-Redux 模拟事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41131395/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com