Question

反应性redux可以在函数中调用父组件，而在函数中调用子组件。通过redux。

//parent coponent
firstFun(){
    this.props.otherFuc()
}

//child component 
otherFun(){
    alert('okk')
}

Answer 1

可能的副本； Call child method from parent

Redux仅用于状态管理。您无需重做就可以实现。

Answer 2

在redux中，您不调用组件。

您使用带有常量示例标记的操作：

export const ActionAddSomething = payload => ({
  type: 'ADD_MSG_GROUP',
  payload
});

然后您通过标记来使用reducer进行操作：

export const ReducerGetSomething = (state=[], action) => {
  switch (action.type) {
        case GET_MSG_GROUP:
      return action.msg

        default:
                return state;
  }
};

然后，您可以像这样访问所有组件的reducer结果（组件从作为HOC的商店进行链接，底部是connect）：

import React from "react";
import { connect } from 'react-redux';


class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }


  render() {
    const { 
      ReducerGetSomething, 
    } = this.props

    return (
      <App>
        <div>{ReducerSortGroupList}</div>
      </App>
    );
  }
}

const mapStateToProps = state => ({
  ReducerGetSomething: state.ReducerSortGroupList
});

const mapDispatchToProps = dispatch => ({
});

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

您可以像这样从笨拙的组件中向父母发送动作：

import React from "react";
import { ActionAddSomething } from './actions_folder/ActionAddSomething
import { connect } from 'react-redux';


const dumbComponent = ({ ReducerSortGroupList }) => {

  return (
    <dumbComponent>
      <Button onClick={ActionAddSomething('Text sent to action')}>send something to action</Button>
      <div>{ReducerSortGroupList}</div>
    </dumbComponent>
  );
}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({
  ActionAddSomething: payload => dispatch(ActionAddSomething(payload))
});

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

重要提示：您注意到我们将操作从文件夹导入到组件中，您应该在其中添加所有操作以获得最佳实践，但是我们不需要导入化简器，因为它已经通过“ connect”从HOC商店中导入。

总结：您可以通过每个组件对商店进行所有访问，操作（组件中的导入操作）相同。

最佳做法是将您的容器（父级）连接到孩子将要执行的每个动作和减速器上，因此您无需多次致电商店，即可获得一点性能提升。

将动作或减速器传递给孩子，例如：

父母：

<Parent>
   <Child
      actionName={this.props.actionName}
      reducerName={this.props.reducerName}
   />
</Parent>

Child:

<Child>
  <div>{props.reducerName}</div>
  <button onClick={props.actionName('send whatever')}>send whatever</button>
</Child>

如果感到困惑，这很正常，就别无选择^^

如何通过Redux React JS将一个函数调用到另一个函数

2 个答案: