React's State、Props 管理利器——Redux
发布于 7 年前 作者 Tonyce 3925 次浏览 来自 分享

原文

前面一篇文章(《State Props——React的关键所在》)说了,React 的关键就是 State、Props。React Component 根据其 State、Props 来渲染 UI。对于 State、Props 的管理,React 有其相应的 Flux 作为解决方案,不过还有一个更简单的解决方案,那就是 Redux

Redux 将 React 整个应用 看做是一个 Component,当然这个 Component 就是 React virtual Tree 的 “根”。

<Provider>便是 React virtual Tree 的“根”,而且拥有一个 store 属性。这个 store 便是整个 React App 的 State、Porps 的“仓储”。

前面说到 React Component 的 Props 是由其所在的外界环境给予的,在 React App中,这个环境也就是 React Component 所在的“父组件”了。而 <Provider> 作为 React App 的根是没有“父组件”的。所以在程序初始化时 <Provider> 被赋予了 store 属性,而这个属性作为 React App 的 State、Porps 的“仓储”。可以说差不多管理了整个应用的 ‘State’,和其它子组件的 Props。子组件所特有的 State、Props除外。

正是由于 Redux 管理了 整个应用的 ‘State’,使得 React Component 的组件通信间变得简单:大家有一个共同的 store ”仓储“,对于需要通信的Component来说,只需要向store说明我什么属性需要通信就好了。只需要将这个属性注册到 store,将它变成全局的 ’State‘。这样这个全局的State变化了,被该State‘注册’到Component 的 Props 也就变化了。

在 store Props 中,有几个方法,其中最常用的就是 dispatch、getState。

如上图:在 Store 中出来的 State 是影响视图的关键,也就是上面说到的,Store 管理着整个应用的 ‘State’(其它组件的Props)。getState 可以让我们拿到 ’全局State‘,然后根据 ’全局State‘ 做相应的逻辑(像首页列表,加载更多)。

图示中,我们点击了view,相当于我们做出了一个 action(动作),由 dispatch 方法将该 action 传递到 Store 中。然后Store 响应给 Reducer。Reducer 根据 action 返回一个响应的 State 给 Store。

Reducer?Reducer是什么?Reducer 就是给 Store生产 State 的地方。更官方的介绍

在写编程中,这个Store一般是见不到它的身影。更多的是和 reducer,state,dispach action打交道。所以React redux 的工作流程就变成了这样:

reducer ----> state ---> store ----> Component ----> UI ----> action ----> dipatch(action) ---> store -----> reducer

由由于 store 不常见,所以可以简单粗暴理解为:

reducer ----> state ----> Component ----> UI ----> action ----> dipatch(action) -----> reducer

这就是 Redux 在 React 中起到的作用。利用一个全局的 Store,简单有效的React State、Props 管理问题。

Redux && Typescript

Redux 对 Tyepscript 支持还是比较友好的,因为是第三方库,不只被 React 所使用,所以Redux官方(Redux GitHub)会有同步 redux.d.ts 文件定义。redux.d.ts

原文

PS:不再对官方的讲述进行过多的引用或解释。仅仅表述自己的理解。希望自己的理解能够作为参考。

回到顶部