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的UI / Presenter将通过道具而不是Child1Component的任何回调进行更新。

当状态发生变化时，是否可以在Child1Component中触发回调？我需要进行此类实现的原因是采用了第三方库。它需要触发回调。实际上，onclick可以直接触发函数（回调）。但是，国家无法维持。

请问有专家建议吗？万分感谢。

P上。

Answer 1

据我了解，这与redux没有直接关系。您可以将反应生命周期方法用于此目的。在您的情况下，我认为您需要componentDidUpdate或componentWillUpdate方法。

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

<强>解释首先，确保使用react-redux绑定将组件连接到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 docs中的react部分和smart-dumb组件分离的redux使用情况

Answer 2

首先，谢谢你的回复。我最终提出了解决方案。在这里。

// 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中触发回调函数？

2 个答案: