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

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

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

据我所知，这与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的用法与终极版文档和有关智能哑组分分离