将整个状态传递给反应组件是一个好的模式吗？答案

【问题标题】：Is passing the entire state down the react component a good pattern?将整个状态传递给反应组件是一个好的模式吗？
【发布时间】：2016-02-12 13:48:21
【问题描述】：

Flux documentation 说：

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

在这个伪代码中（说明了 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);
}

问题是：整个状态向下传递组件层次结构不是一种反模式吗？

【问题讨论】：

标签： functional-programming reactjs flux

【解决方案1】：

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

function rootComponent(userState, bookState){
  bookTitle(bookState);
  bookDescription(bookState);
  bookPrice(bookState);
}

bookTitle(bookState) {
  div(bookState.title)
  div(bookState.author)
}

bookDescription(bookState) {
  div(bookState.description)
}

bookPrice(bookState) {
  div(bookState.price)
}

所以，如您所见，我并没有传递应用程序的整个状态，而是将来自书店的所有状态打包发送给与该商店相关的所有孩子

【讨论】：