如何在不中断更新的情况下传递 class 个实例以做出反应 children？

Question

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

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

Answer 1

通常将组件分开以实现更好的可维护性：HOC(container) and presentatianal components..

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

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

用于使用动作创建器的不同实例class

第一种方式

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

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

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

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

顺便说一句，您也可以从商店 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;
}

如何在不中断更新的情况下传递 class 个实例以做出反应 children？

How to pass class instances to react children without breaking updates?

javascript

reactjs

redux

react-redux