如何传递类实例以响应孩子而不中断更新？

Question

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

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

Answer 1

通常为了更好的可维护性而划分的组件： HOC（容器）和足弓组件。

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

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

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

第一路

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

我猜，您可以对ActionsClass(ownProps.endpoint)使用reselect

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

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

顺便说一句，您也可以通过存储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;
}