• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何在Redux中触发回调函数?

reactjs 来源:cysorp 6次浏览

React和Redux专家。如何在Redux中触发回调函数?

我是React和Redux的新手。当Redux状态改变时,我的问题与触发回调(函数)调用有关。我陷入这个实现。在我的理解中,主持人/观点通过道具更新。让我在下面的例子中进一步说明。

<ParentComponent>
        <Child1Component/>
        <Child2Component/>
</ParentComponent>

class ParentComponent extends Component { 

    onChild1Click() { 
     this.props.dispatch(setTool(Tools.CHILD1TOOL)) 
    } 

    render() { 
     return (
      <div> 
        <Child1Component onChild1Click={this.onChild1Click.bind(this)}/> 
        <Child2Component/> 
      </div> 
     ) 
    } 
} 

const mapStateToProps = state => { 
    return {state} 
} 

export default connect(
    mapStateToProps 
)(ParentComponent) 

class Child1Component extends Component { 

    componentDidUpdate() { 
     // Question: How to get the Redux state here? 
    } 

    render() { 
     return (
      <button onClick={this.props.onPencilClick}>Pencil</button> 
     ) 
    } 
} 

假设Child1Component中存在按钮,并且onclick已连接到此按钮。在我对Redux的理解中,应该附上一个动作onclick,它应该被调度。这种状态将在ParentComponent中修改并触发道具更新。之后,Child1Component的用户界面/演示者将通过道具更新,而不是任何回调Child1Component

当状态改变时,是否可以在Child1Component中触发回调?我需要做这样的实现的原因是采用了第三方库。它需要触发回调。实际上,onclick可以直接触发函数(回调函数)。但是,国家不能维持。

请问专家有什么建议吗?太感谢了。

P.


===========解决方案如下:

首先反应部分,感谢您的答复。我最终提出了解决方案。这里是。

// actions.js 
export const SET_TOOL = 'SET_TOOL' 

export const Tools = { 
    CHILD1TOOL: 'child1tool', 
    DEFAULT: 'default' 
} 

export function setTool(tool) { 
    return { 
     type: SET_TOOL, 
     tool 
    } 
} 

// reducers.js 
import { combineReducers } from 'redux' 
import { SET_TOOL, Tools } from './actions' 

const { DEFAULT } = Tools 

function currentTool(state = DEFAULT, action) { 
    switch(action.type) { 
     case SET_TOOL: 
      return action.tool 
     default: 
      return state 
    } 
} 

const myApp = combineReducers({ 
    currentTool 
}) 

export default myApp 

// ParentComponent.jsx 
import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { Tools, setTool } from './actions' 
import Child1Component from './Child1Component.jsx' 

class ParentComponent extends Component { 

    render() { 
     return (
      <div> 
       <Child1Component onChild1Click={this.props.onChild1Click'}/> 
      </div> 
     ) 
    } 

} 

const mapStatesToProps = state => { 
    return {state} 
} 

const mapDispatchToProps = dispatch => { 
    return { 
     onChild1Click:() => { 
      dispatch(setTool(Tools.CHIDL1TOOL)) 
     } 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(ParentComponent) 

// Child1Component.jsx 
import React, { Component } from 'react' 
import { connect } from 'react-redux' 

import { Tools } from './actions' 

class Child1Component extends Component { 

    componentDidUpdate() { 

     if (this.props.state.currentTool === Tools.CHILD1TOOL) { 
      this.callbackHandleClick() 
     } 
    } 

    render() { 
     return <button onClick={this.props.onChild1Click}>Child 1 Button</button> 
    } 

    callbackHandleClick() { 
     /* callback implementation */ 
    } 

} 

const mapStateToProps = state => { 
    return {state} 
} 

export default connect(
    mapStateToProps 
)(Child1Component) 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)