react-redux 知识点

React-Redux 使用

1. 如果只使用redux，那么流程是这样的：
   
   component --> dispatch(action) --> reducer --> subscribe --> getState --> component
   
   用了react-redux之后流程是这样的：
   
   component --> actionCreator(data) --> reducer --> component
   
   store的三大功能：dispatch，subscribe，getState都不需要手动来写了。react-redux帮我们做了这些，同时它提供了两个好基友Provider和connect。
2. Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state，并用subscribe监听state的变化，然后用getState获取变化后的值。但是并不推荐这样做，它会让数据流变的混乱，过度的耦合也会影响组件的复用，维护起来也更麻烦。
3. connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且再返回一个函数--wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。
   
   所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

react-redux 流程：

1. 定义组件；
2. 定义action；
3. 定义Reducer：reducer1(state,action)；
4. 定义store：store（reducer1）；
5. 定义mapStateToProps(state)；
6. 定义mapDispatchToProps(dispatch)；
7. 定义connect：

const App = connect(
　　mapStateToProps,
　　mapDispatchToProps
)(组件);

1. 渲染元素：

ReactDOM.render(
　　<Provider store={store}>
　　　　<App />
　　</Provider>,
　　document.getElementById('page')
);

redux 理解

• 为了有更好的state管理，就需要一个库来作为更专业的顶层state分发给所有React应用，这就是Redux。
  
  让我们回来看看重现上面结构的需求：
  
  a. 需要回调通知state (等同于回调参数) -> action
  
  b. 需要根据回调处理 (等同于父级方法) -> reducer
  
  c. 需要state (等同于总状态) -> store
• 对Redux来说只有这三个要素：
  
  a. action是纯声明式的数据结构，只提供事件的所有要素，不提供逻辑。
  
  b. reducer是一个匹配函数，action的发送是全局的：所有的reducer都可以捕捉到并匹配与自己相关与否，相关就拿走action中的要素进行逻辑处理，修改store中的状态，不相关就不对state做处理原样返回。
  
  c. store负责存储状态并可以被react api回调，发布action.
• 当然一般不会直接把两个库拿来用，还有一个binding叫react-redux, 提供一个Provider和connect。很多人其实看懂了redux卡在这里。
  
  a. Provider是一个普通组件，可以作为顶层app的分发点，它只需要store属性就可以了。它会将state分发给所有被connect的组件，不管它在哪里，被嵌套多少层。
  
  b. connect是真正的重点，它是一个科里化函数，意思是先接受两个参数（数据绑定mapStateToProps和事件绑定mapDispatchToProps），再接受一个参数（将要绑定的组件本身）：
  
  mapStateToProps：构建好Redux系统的时候，它会被自动初始化，但是你的React组件并不知道它的存在，因此你需要分拣出你需要的Redux状态，所以你需要绑定一个函数，它的参数是state，简单返回你关心的几个值。
  
  mapDispatchToProps：声明好的action作为回调，也可以被注入到组件里，就是通过这个函数，它的参数是dispatch，通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch，就可以作为属性在组件里面作为函数简单使用了，不需要手动dispatch。这个mapDispatchToProps是可选的，如果不传这个参数redux会简单把dispatch作为属性注入给组件，可以手动当做store.dispatch使用。