使用redux从另一个组件调用函数_Redux

使用redux从另一个组件调用函数

redux

使用redux从另一个组件调用函数,redux,Redux,尝试使用redux从另一个组件切换打开模式。差不多了，但不确定如何完成——一直在寻找一个明确的答案在主屏幕组件（主组件）上，激活AddCircleModel组件上的OpenModel方法，使模式打开模态-addCircleModel:使用redux，如果在代码中手动打开模态，我可以成功关闭模态 class AddCircleModal extends React.Component { state = { top: new Animated.Value(screenH

尝试使用redux从另一个组件切换打开模式。差不多了，但不确定如何完成——一直在寻找一个明确的答案

在主屏幕组件（主组件）上，激活AddCircleModel组件上的OpenModel方法，使模式打开

模态-addCircleModel:使用redux，如果在代码中手动打开模态，我可以成功关闭模态

class AddCircleModal extends React.Component {
    state = {
        top: new Animated.Value(screenHeight),
        modalVisible: false
    }

    // componentDidMount() {
    //         this.openModal()
    //     }

    openModal = () => {
        Animated.spring(this.state.top, {
            toValue: 174
        }).start()
        this.setState({modalVisible: true})
    }

    closeModal = () => {
        Animated.spring(this.state.top, {
            toValue: screenHeight
        }).start()
        this.setState({modalVisible: false})
    }

    render() {
        return (
            <Modal
             transparent={true}
             visible={this.state.modalVisible}
             >
                <AnimatedContainer style={{ top: this.state.top, }}>
                    <Header />
                    <TouchableOpacity
                        onPress={this.closeModal}
                        style={{ position: "absolute", top: 120, left: "50%", marginLeft: -22, zIndex: 1 }}
                    >
                        <CloseView style={{ elevation: 10 }}>
                            <FeatherIcon name="plus" size={24} />
                        </CloseView>
                    </TouchableOpacity>
                    <Body />
                </AnimatedContainer>
            </Modal>
        )
    }
}

function mapStateToProps(state) {
    return { action: state.action }
}

function mapDispatchToProps(dispatch) {
    return {
        closeModal: () =>
            dispatch({
                type: "CLOSE_MODAL"
            })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddCircleModal)

现在，您的组件没有正确使用redux存储

使用

MapStateTrops

时，可以访问每个redux存储还原器。您可以访问其中的每个道具，这些道具将通过连接组件中的

props

发送。例如：

//redux
import { connect } from 'react-redux'

import styles from './Styles'

class HomeScreen extends React.Component {

  constructor() {
    super();
    this.state = {
    };
  }

  toggleOpenCircleModal = () => {
      if(this.props.action === 'openModal') {
         this.props.openModal();
      } else {
         this.props.closeModal();
      }
  }


  render() {
    const { action } = this.props; // this.props.action is coming from Redux Store
    return (
      <SafeAreaView>
         {action} // this will be 'openModal'
      </SafeAreaView>
    );
  }
}

function mapStateToProps(state) {
    return { action: state.action } // this will be available in HomeScreen as props.action
}

function mapDispatchToProps(dispatch) {
    return {
        openModal: () =>
            dispatch({
                type: "OPEN_MODAL"
            })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

理解你答案的后半部分，但不确定我是否理解前半部分的逻辑。为什么我不能像现在一样使用mapDispatchToProps，然后通过“this.props.action”调用该分派操作？@JamesStirrat在

addCircleModel

组件中，您没有使用

this.props.action

。在第一个代码片段中，为了简单起见，我删除了一些代码。我将编辑并添加

mapDispatchToProps

@JamesStirrat我已经编辑了显示代码的答案。您分派的操作是您在

mapDispatchToProps

中拥有的操作

this.props.action

是存储中的一个值，来自

mapstatetops

，来自

modaltogle

reducer。Redux具有单向数据流的概念。如果您需要更改商店中的某些内容，可以通过调度操作来完成。然后，在连接的组件中，您使用redux存储并将这些值作为未连接组件的道具公开！尽管现在在我的代码中（按照您所说的），实际上在控制台中没有发生调度。我会检查我的redux设置太棒了！如果您仍有问题，请进行跟进

const initialState = {
    action: ""
}

const modalToggle = (state = initialState, action) => {
    switch (action.type) {
        case "OPEN_MODAL":
            return { ...state, action: "openModal" }
        case "CLOSE_MODAL":
            return { ...state, action: "closeModal" }
        default:
            return state
    }
}

export default modalToggle

//redux
import { connect } from 'react-redux'

import styles from './Styles'

class HomeScreen extends React.Component {

  constructor() {
    super();
    this.state = {
    };
  }

  toggleOpenCircleModal = () => {
      if(this.props.action === 'openModal') {
         this.props.openModal();
      } else {
         this.props.closeModal();
      }
  }


  render() {
    const { action } = this.props; // this.props.action is coming from Redux Store
    return (
      <SafeAreaView>
         {action} // this will be 'openModal'
      </SafeAreaView>
    );
  }
}

function mapStateToProps(state) {
    return { action: state.action } // this will be available in HomeScreen as props.action
}

function mapDispatchToProps(dispatch) {
    return {
        openModal: () =>
            dispatch({
                type: "OPEN_MODAL"
            })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

const initialState = false;

const modalToggle = (state = initialState, action) => {
    switch (action.type) {
        case "OPEN_MODAL":
            return true;
        case "CLOSE_MODAL":
            return false;
        default:
            return state
    }
}

export default modalToggle