Question

想象一下，你有一个相对简单的组件，你作为组件库的一部分创建（简化为简洁）：

class ExampleComponent extends React.Component {
    componentDidMount() {
        getAsyncData().then((response) => {
            const {a} = response.data;
            this.setState({a});
            this.props.notify({a});
        });    
    }

    render() {
        return (
            <h1>{this.state.a}</h1>
        );
    }
}

该组件是必需的允许将其放入应用程序（想想谷歌地图采用相对类似的方法）并让它正常工作。但是，它可以通过data通过某种回调（请参阅上面的response）与其他应用程序共享this.props.notify props。data。 这是实际要求，而不是架构选择。

由于这是库的一部分 - 你不知道它将始终在中使用什么类型的应用程序，但你确实知道许多很多案例它将在 Redux 应用程序中使用。

对于Redux应用程序，上述自包含方法不一定是最佳方法 - 因为response中检索到的ExampleComponent最好保存在Redux 中的应用程序状态中商店，它可以被应用程序的其他部分使用。

更重要的是 - state本身最好不要“被动”而根本没有mapStateToProps，而是使用props让Redux基础设施通过状态更新将状态更新注入其中ExampleComponent。

我的想法是，当setState Redux应用程序时，this.state调用render方法props中的ExampleComponent通过Redux抽象并“重新路由”到dispatch？

一种方法是让setState使用默认调用dispatch的{{1}}，并且可以通过注入的Redux class ExampleComponent extends React.Component { constructor() { super(); this.dispatch = this.props.dispatch || this.dispatch; } componentDidMount() { getAsyncData().then((response) => { this.dispatch({type: 'SOME_ACTION', data: response.data}); }); } dispatch(action) { swtich (action.type) { case 'SOME_ACTION': const {a} = action.data; this.setState({a}); case 'ANOTHER_ACTION': ... } } render() { return ( <h1>{this.state.a}</h1> ); } }覆盖 - 基本上将其转换为Redux：< / p>

this.state.a

以上示例效果很好，除了：

this.props.state及其亲属在代码周围散布，而在Redux中应该是this.dispatch = this.props.dispatch || this.dispatch;
必须在每个组件中执行BaseComponent

我想避免明显的setState解决方案将import Ember from 'ember'; import config from './config/environment'; const Router = Ember.Router.extend({ location: config.locationType }); Router.map(function() { this.route('songs'); this.route('song', {path: 'songs/:song_trackId'}); }); export default Router;抽象为某种混合......因为这将使代码随着时间的推移远离“规范”的React。

您是否看到了两种方法可以组合的优雅方式，Redux取代了固有方法？

Answer 1

你认为使用Redux的React组件与没有Redux的React组件不同时，你犯了一个根本性的错误。

实际上，React组件只是一个React组件。

这是您需要的所有组件：

def reduction(n):
    print(n)
    if n <= COMPRESSED_BLOCK_SIZE:
        retval = [n]
    else:
        retval = [COMPRESSED_BLOCK_SIZE] + [0] + reduction(n - COMPRESSED_BLOCK_SIZE)

    print(retval)
    return retval

简单，干净，可读，可测试。

没有明显的理由说明为什么异步数据提取应该隐藏在组件的function ExampleComponent({ a }) { return ( <h1>{a}</h1> ); }方法中。它可以在应用程序的任何其他位置触发。它应该是。

创建可以*在Redux应用程序中使用的React组件

1 个答案: