理解Redux-原理和流程简介

1. redux核心

• store: 是一个js对象，存储状态的容器
• reducer：是一个函数，向store中存储状态，以及更新store中的状态
• action：是一个js对象，这个对象有一个type属性，描述对store中的状态进行怎样的操作
• view：视图HTML
  

1. view中通过调用dispatch() 方法触发Action

Action中描述了，对store中的状态要进行怎样的操作

2. 被触发的Action会被Reducer接收到，Reducer函数内部根据Action中的type判断，对状态进行怎样的操作。
3. 当Reducer数据处理完成之后（一般是根据action传入的参数，将原来的store拷贝一份并合并，最后返回新的对象），最终跟新Store中的状态
4. 当Store中的状态发生更新之后，将新的状态同步到视图View

视图中通过订阅了Store,当Store发生变化会通知View更新
那么view 是如何订阅Store的呢？
在React应用中使用Redux时，React组件通过react-redux库中的connect函数来订阅Redux Store。connect函数是react-redux提供的一个高阶函数，它将React组件连接到Redux Store，并将Redux中的状态和操作映射到组件的props中。

import { connect } from 'react-redux';

const mapStateToProps = state => {
  // 将Redux中的状态映射到组件的props中
  return {
    someValue: state.someValue
  };
};

const mapDispatchToProps = dispatch => {
  // 将Redux中的操作映射到组件的props中
  return {
    someAction: () => dispatch(someAction())
  };
};

// 使用connect将组件连接到Redux Store
const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent);

总结

所有的状态都存储在Store当中，View不能直接操作Store；
View需要更新状态时，需要通过dispatch函数，去触发Action（描述一下我要对当前状态做怎样的操作）；
然后，Action会被Reducer接收到，Reducer根据Action中的type属性值的不同，对状态进行不同的处理；
Reducer处理完之后，返回一个新的值，最终Store更新这个值；
因为View订阅了Store对应值的更新，因此当Store更新时，会通知View更新视图。

流程：

1. Action触发：通过dispatch方法，触发Action
2. Action被发送到Reducer：Redux中的Reducer函数会根据接收到的Action类型来更新应用的状态。
3. 状态更新：Reducer函数会生成一个新的状态对象，该对象代表了应用在这个特定动作之后的状态
4. 状态订阅：Redux会通知应用中任何订阅了状态变化的部分，以便更新用户界面或执行其他逻辑。