Question

顶级App组件在构造函数方法中订阅了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？

Answer 1

如果您的组件树不是很深，那么您是对的。优点不是那么清楚。但是，大多数不是简单示例的React应用程序很快会有很长的树，特别是在组合多个组件时。

想象一下，你在树上有一个血统

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

和LikeButton组件需要访问当前选定的帖子，并且希望发送操作以更新该帖子的相似计数。

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

Answer 2

有很多原因。

首先，根据Redux FAQ answer on connecting multiple components：

在Redux示例中强调“顶部的一个容器组件”是一个错误。不要把它当作格言。尽量将您的演示文稿组件分开。通过在方便的时候连接它们来创建容器组件。每当您想要复制父组件中的代码以为相同类型的子组件提供数据时，就需要时间来提取容器。一般情况下，一旦您认为父母对“个人”数据或其子女的行为了解太多，就应该及时提取容器。

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

更多连接组件意味着更容易推断给定组件正在做什么。它声明了它需要从状态中获取什么数据，以及它想要分派的动作，并且你不必从根目录中一直传递道具只是为了让它们到达那个组件。

此外，已显示具有更多连接组件是整体性能改进。通过减少浪费的重新渲染组件，已经证明了更多mapState次调用的成本。

继续之后：React-Redux已经有一个很多的优化工作（并且即将到来的React-Redux v5是一个完整的内部重写，具有重大的性能改进）。

换句话说，如果您将React与Redux一起使用，那么应该使用React-Redux及其connect函数来构建您的UI。

Answer 3

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

@ lux的评论最能回答我的问题，所以我将它贴在这里（强调我的）：

无论您是否需要在该状态切片上工作，都会在每次状态更改时调用您在Redux中创建的任何订阅。 react-redux允许我们指定某些组件应订阅的商店的哪些部分，因此我们只会＆＃34;订阅＆＃34;我们想要的改变

Answer 4

您可以通过Redux执行此操作，但仍然可以避免对所有组件进行更新。是的，您可以调整当前组件是否应该更新。这是示例代码

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

与react-redux库相同的事情将以

完成

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()的调用将是多余的。因此，它使我们免于手工操作。

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

4 个答案: