https://cn.redux.js.org/tutorials/essentials/part-1-overview-concepts/

老项目

新项目

React 简单 demo

• state：驱动应用的真实数据源头
• view：基于当前状态的视图声明性描述
• actions：根据用户输入在应用程序中发生的事件，并触发状态更新

function Counter() {
  // State: counter 值
  const [counter, setCounter] = useState(0)

  // Action: 当事件发生后，触发状态更新的代码
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: 视图定义
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

redux简介

• Redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。
• Redux是将整个应用状态存储到到一个地方，称为store
• 里面保存一棵状态树(state tree)
• 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件
• 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

为什么要用 Redux

• 应用中有很多 state 在多个组件中需要使用
• 应用 state 会随着时间的推移而频繁更新
• 更新 state 的逻辑很复杂