通过整个州的反应组件是一个好的模式?

时间:2015-11-11 12:59:41

标签: functional-programming reactjs flux

Flux documentation说:

  

我们经常将商店的整个状态传递到单个对象中的视图链中,允许不同的后代使用他们需要的东西。除了将类似控制器的行为保持在层次结构的顶部,从而使我们的后代视图尽可能保持功能纯净之外,在单个对象中传递商店的整个状态也具有减少道具数量的效果我们需要管理。

在这个伪代码中(说明了Flux文档建议的整个商店的传递),组件的接口似乎没有很好地定义。

function header (state) {
    profileLink(state);
    navigation(state);
}

function postList (state) {
    ul(state);
}

function footer (state) {
    div(state.copyright);
}

function rootComponent () {
    var state = getState();
    header(state);
    postsList(state);
    footer(state)
}

以下示例(具有更具体的组件接口)是否更符合函数式编程范例?

function header (userName, navigationItems) {
    profileLink(username);
    navigation(navigationItems);
}

function postList (posts) {
    ul(posts);
}

function footer (copyright) {
    div(copyright);
}

function rootComponent () {
    var state = getState();
    header(state.user.name, state.navigation.items);
    postsList(state.posts);
    footer(state.copyright);
}

问题是:是不是整个州在组件层次结构中传递反模式?

1 个答案:

答案 0 :(得分:0)

我认为他的意思有时是方便将一个特定商店的整个州传递给孩子们。如果所有孩子都与商店有关,这是有道理的。例如:



            function redrawTL(){
                $.ajax({
                    type: "POST",url: "ajax/timeline.php", data: {},
                    success: function(data){
                        var result = JSON.parse(JSON.parse(JSON.stringify(data)));
                        items.clear();
                        items.add(result);
                        timeline.fit();
                    }
                });
            }




所以,正如你所看到的,我没有通过应用程序的整个状态,但来自书店的所有状态都被发送给所有与该商店相关的孩子