Question

在react-redux应用程序中，将动作创建者集合传递给子组件的最佳做法是什么？

更具体地说，我希望有一个为我执行网络请求的类。我想为不同的端点创建该类的不同实例。该类中的方法是动作创建者。如何在不破坏redux connect浅层比较的情况下将该类的特定实例传递给我的子组件？我是否必须实现自定义的shouldComponentUpdate方法？有没有更好的方法来做到这一点？

Answer 1

通常将组件划分为更好的可维护性：HOC(container) and presentatianal components..

如果您的容器包含演示组件：

您无需通过演示文稿组件传递您的操作创建者，因为他们不应该对redux部件有任何了解。如果表示组件触发某些操作，您应该使用回调来调用容器中的调度。

用于使用不同的动作创建者类

第一种方式

import ActionsClass from './Actions/ActionsClass';
const actions = ActionsClass('endpoint');

class Container extends Component {...}
export default connect(state=>({foo:state.foo}),actions)(Container);

第二种动态方式，通过道具传递端点

import ActionsClass from './Actions/ActionsClass';
import { bindActionCreators } from 'redux'

class Container extends Component {...}

const mapDispatchToProps = (dispatch,ownProps)=>({
   actions: bindActionCreators(ActionsClass(ownProps.endpoint) , dispatch) 
});

export default connect(state=>({foo:state.foo}),mapDispatchToProps)(Container);

我想，您可以将reselect用于ActionsClass(ownProps.endpoint)

没有Class的第三种动态方式，将端点传递给操作

import actions from './actions';

class Container extends Component {
    onChange(arg1,arg2){
       this.props.someAction(arg1,arg2,this.props.endpoint)
    }
    render(){
       return(<SomeComp onChange={this.onChange.bind(this)}/>
    }
}

export default connect(state=>({foo:state.foo}),actions)(Container);

btw，您也可以从商店state=>({endpoint:state.endpoint})

传递端点

第四步......通过redux-thunk

从动作创建者处获取端点

const actionFetch = (notes) => (dispatch,getState)=>{
    let endpoint = getState()[notes].endpoint;
    fetch(endpoint).then(...
    //or let endpoint = endpointsFromModule[notes].fetchAll;
}

如何传递类实例以在不破坏更新的情况下对子进行反应

1 个答案: