React-Redux实现组件通信
我们都知道,像用户信息等可以整个应用共享的信息,应该使用状态管理,达到全局共享公共状态的效果,保证拿到的信息一致;
如果是简单的组件之间共用数据,那么使用props可以解决;那如果是复杂组件呢?provide可以解决。
除了数据,不同层级之间的通信,又该如何进行?
于是,react-redux应运而生。
看看react,react-redux,redux之间的关系:
redux其实不仅仅可以应用到react,还可以应用于Vue等类似的前端库。
看看react-redux官网描述:
核心API:createStore,combineReducers,applyMiddleware,connect
先上代码:
1. Provider 作用就是保存 redux 中的 store ,分配给所有需要 state 的子孙组件。
2. connect
既然已经全局注入了 Store ,那么需要 Store 中的状态或者想要改变Store的状态,那么如何处理呢,React-Redux 提供了一个高阶组件connect,被 connect 包装后组件将获得如下功能:
-
1 能够从 props 中获取改变 state 的方法 Store.dispatch 。
-
2 如果 connect 有第一个参数,那么会将 redux state 中的数据,映射到当前组件的 props 中,子组件可以使用消费。
-
3 当需要的 state ,有变化的时候,会通知当前组件更新,重新渲染视图。
开发者可以利用 connect 提供的功能,做数据获取,数据通信,状态派发等操作。首先来看看 connect 用法。
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)