为什么使用react-redux而不仅仅是redux？

顶层应用程序组件订阅在构造函数方法的终极版商店：为什么使用react-redux而不仅仅是redux？

constructor() { 
    super() 
    this.state = store.getState() 
    store.subscribe(() => { 
    this.setState(store.getState()) 
    }) 
}

它传递到子组件作为道具的状态的部件。如果某些子组件需要更新状态，它只是分派一个动作：

<button onClick={() => { 
    store.dispatch({type: 'INCREMENT'}) } 
}>increment</button>

什么是使用react-redux在此设置的优势呢？换句话说，我为什么需要react-redux？

来源

2016-11-30 adamboro

通过react-redux，您可以使用'connect'功能将任何组件连接到应用商店。如果没有连接，你必须手动完成。而且，一般来说，任何图书馆的目的都是为了减少手工工作量。 –

由于您在Redux中创建的任何订阅都会在每次状态更改时被调用，无论您是否需要在该状态片上进行操作。 'react-redux'允许我们指定某些组件应该订阅的商店的哪些部分，因此我们只需“订阅”我们想要的更改。 – lux

它的要点是关注点分离 - react-redux允许访问和更改组件需要访问和更改的状态部分。

@勒克斯的评论回答我的问题最好的，所以我会贴在这里（重点煤矿）：

你在终极版中创建的任何订阅将被调用每个状态变化，不管你是否需要在那个状态切片上工作或没有。 react-redux允许我们specifiy该商店的某些组件的部分应该订阅，因此我们只有“订阅”的变化，我们希望

来源

2016-12-04 21:22:44 adamboro

这是不正确的，因为在Redux中也可以做同样的事情，所以不应该接受答案。 – kushalvm

如果你的组件树不是很深，那么你是对的。优势并不明显。然而，大多数不是简单示例的React应用程序都会很快产生长树，特别是在组合许多组件时。

假设你有一个树去

App -> HomePage -> BlogContainer -> PostList -> Post -> CustomCard -> Card -> LikeButton

和LikeButton组件需要访问当前选定的职位的血统，并希望派遣一个动作，以更新后的样数。

在您的设置中，App和LikeButton之间的每个组件都需要传递该信息，即使它们从未使用过它。使用react-redux的connect功能，您可以直接将LikeButton连接到redux商店，并有权访问dispatch。 YMMV，但一般来说这是一个很好的利用模式。

来源

2016-11-30 18:30:53 azium

难道你仍然需要将数据传递给Post子树吗？这是对原始的改进，但类似的按钮仍然需要知道关于该文章的东西或对其进行回调。 –

'PostList'可能会将帖子ID传递给'Post'，后者可能会将它传递给'LikeButton'。不过，绝对不是'App'需要了解的任何内容。 – markerikson

一些原因。

首先，每Redux FAQ answer on connecting multiple components：在Redux的例子

强调“顶部一个容器组件”是一个错误。不要把这当成一句格言。尽量让您的演示文稿组件分开。在方便时通过连接来创建容器组件。每当你觉得你正在复制父组件中的代码来为相同种类的孩子提供数据时，就需要花费时间来提取一个容器。一般情况下，只要您觉得父母对孩子的“个人”数据或行为知之甚多，就有时间提取容器。

换句话说，一个有意义的应用程序将在组件树中的不同位置连接多个组件。

更多的组件意味着它更容易推理什么给定组件在做什么。它声明它需要从状态获得什么数据，以及它想要分派什么样的动作，并且你不必为了让它们到达组件而从根传递道具。

此外，具有多个连接的组件已经被证明是一种整体的性能提高。更多的mapState调用的成本已被证明超过重组渲染浪费较少的组件。

从继：阵营 - 终极版已优化工作投入它的很多（和即将到来的React-Redux v5是一个完整的内部重写与主要性能增强）。

换句话说，如果你使用的是与Redux的反应，你应该使用作出反应，终极版和connect功能来构建你的UI。

来源

2016-11-30 18:46:43 markerikson

您可以通过终极版做到这一点，仍然避免更新所有组件。是的，你可以调整你的当前组件是否应该更新。这里的示例代码

class VisibleTodos extends Component{ 
    componentDidMount(){ 
     this.unsubscribe = store.subscribe(() => { 
      this.forceUpdate(); 
     }); 
    } 

    componentWillUnmount() { 
     this.unsubscribe(); 
    } 


    render(){ 


     const state = store.getState(); 

     return(
      <TodoList 
       todos = {getVisibleTodos(
        state.todos, 
       state.visibilityFilter 
      )} 
       onTodoClick = {id => { 
        store.dispatch({ 
         type: 'TOGGLE_TODO', 
        id 
       }) 
       }} 
      > 
      </TodoList> 
     ) 
    } 
}

与反应，终极版库同样的事情会做的

const mapStateToProps = (state) => { 


return { 
    todos: getVisibleTodos(
     state.todos, 
     state.visibilityFilter 
    ) 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch({ 
     type: 'TOGGLE_TODO', 
     id 
     }); 
    } 
    }; 
}; 

const { connect } = ReactRedux; 
const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList);

所以，想象一下有与此类似，并在前者的情况下其他几个组件，调用this.forceUpdate()和this.unsubscribe()会是多余的。因此，它使我们免于手动工作。

来源

2017-10-03 10:16:38 kushalvm

为什么使用react-redux而不仅仅是redux？

回答

相关问题