reactjs - redux 的好处

Question

我开始在没有 Redux 或 Flux 的情况下学习 React，并且听到了很多有关 Redux 的信息，以及它似乎是用于管理 future 状态的有利模式。我的理解是应用程序的整个状态都存在于商店中，我相信商店位于 React 树的顶部。然后，各个子组件“订阅”与其相关的各种状态。

这让我有点困惑，因为我认为 React 的核心结构已经以这种方式设置了？也就是说，如果我的组件具有某种状态，那么要将其传递给其子组件以便在 React 树中进一步使用，我需要将 this.state.example 或 this.props.example 添加到组件中。对我来说，通过这种方法，我也在以某种方式“订阅”该组件..

很抱歉，如果这不是解决此类问题的正确位置，但如果有人可以告诉我我在这里缺少什么或 Redux 的额外好处，那将非常有帮助!

Answer 1

您在订阅部分的方向是正确的，但是 Redux 和许多其他 Flux 之类的状态管理模式的美妙之处在于，您不必将属性沿着子链传递，这样您就可以更新子组件，例如所以(如果你愿意，但不需要):

function Parent() {
  return <ChildOne color="red" />
}

function ChildOne(props) {
  return <ChildTwo color={props.color} />
}

function ChildTwo(props) {
  return <h1>The Color was: {props.color}</h1>
}

它允许您向状态存储"dispatch"(redux/flux 术语)一个action，以更新组件可能订阅的任何对象的属性.

对于该“连接”来说，一个有用的库是 react-redux 。它有很多功能，但我看到的主要功能是 connect，它是一个高阶组件 (HOC)，它用更多逻辑“包装”您的组件，包括您想要订阅的 Redux 存储部分到。

所以上面的内容可能是:

export class Parent extends React.Component {
   componentDidMount() {
     this.props.dispatch(changeColor('red'));
   }
   render() {
     return <ChildOne />
   }
}
export default connect((state) => ({ //This property is the redux store
  parent: state.parent,
}))(Parent) //higher order component that wraps the component with redux functionality

function ChildOne(){
  return (
     <ChildTwo />
  );
}

export function ChildTwo(props) { //will have childTwo bound in props object
  return (
    <h1>The Color is: {props.childTwo.color}
  );
}
export default connect((state) => ({ //This property is the redux store
  childTwo: state.childTwo,
}))

最大的区别在于，您不必将颜色从 Parent 向下传递 2 级到 ChildTwo，因为它已“订阅”到 redux 存储中的 childTwo 对象，并且您将该状态位连接到组件，因此对存储的任何更改都将触发组件从状态更改重新渲染。

属性的传递和使用 Redux 将更有意义 medium post Presentation 和 Container 组件，其中属性传递是有意义的，因为您只深入一层子层，并且容器组件正在处理 ajax 请求或调度等逻辑到 redux 存储的部分内容等。