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

Question

React和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.

Answer 1

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

// 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) 

Answer 2

据我所知，这与redux没有直接关系。您可以使用反应生命周期方法来达到此目的。在你的情况下，我认为你需要componentDidUpdate或componentWillUpdate方法。

您可以在此处详细了解生命周期方法， https://reactjs.org/docs/react-component.html

说明 首先，确保你已经使用react-redux绑定连接组件到终极版商店。然后，如果您已正确定义mapStateToProps函数，则只要状态发生更改，您的子组件就会更新。因此，无论何时更新组件，将调用componentWillUpdate和componentDidUpdate方法。

例在ES6风格

首先，我们要充分Redux的状态结合到子组件。 注意：通常情况下，你不会绑定完整的状态，而只是它的一个分支。

import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import ChildComponent from './ChildComponent'; 

function mapStateToProps(state) { 
    return { 
     // this will bind the redux state to the props of the child component 
     reduxState: state 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
     // some action creators 
    }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); 

然后，我们可以从子组件访问了Redux状态。

class ChildComponent extends React.Component { 

    componentWillMount(nextProps, nextState) { 
     // Do something here 
     console.log(this.props.reduxState) 
     // this.props.reduxState is accessible from anywhere in the component 
    } 

    render() { 
     return <div>{/*Some jsx here*/}</div> 
    } 
} 

我强烈建议你阅读有关Redux的用法与终极版文档和有关智能哑组分分离