React进阶--react-redux使用

160 阅读2分钟

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?)