摘要: 现在 make-react-redux 工程代码中的 Redux 和 React-redux 都是我们自己写的,现在让我们来使用真正的官方版本的 Redux 和 React-redux。 在工程目录下使用 npm 安装 Redux 和 React-redux 模块: 把 src/ 目录下 Heade 阅读全文
posted @ 2018-04-13 16:04 何塞穆里尼奥 阅读(464) 评论(0) 推荐(0) 编辑
摘要: 到这里大家已经掌握了 React-redux 的基本用法和概念,并且自己动手实现了一个 React-redux,我们回顾一下这几节都干了什么事情。 React.js 除了状态提升以外并没有更好的办法帮我们解决组件之间共享状态的问题,而使用 context 全局变量让程序不可预测。通过 Redux 的 阅读全文
posted @ 2018-04-13 15:50 何塞穆里尼奥 阅读(417) 评论(0) 推荐(0) 编辑
摘要: 我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的。那就是 src/index.js 里面的 Index: 其实它要用 context 就是因为要把 store 存放到里面,好让子组件 connect 的时候能够取到 store。我们可以额外构建一个组 阅读全文
posted @ 2018-04-13 15:43 何塞穆里尼奥 阅读(635) 评论(0) 推荐(0) 编辑
摘要: 在重构 ThemeSwitch 的时候我们发现,ThemeSwitch 除了需要 store 里面的数据以外,还需要 store 来 dispatch: 目前版本的 connect 是达不到这个效果的,我们需要改进它。 想一下,既然可以通过给 connect 函数传入 mapStateToProps 阅读全文
posted @ 2018-04-13 15:24 何塞穆里尼奥 阅读(10646) 评论(0) 推荐(0) 编辑
摘要: 我们来观察一下刚写下的这几个组件,可以轻易地发现它们有两个重大的问题: 对于第一个问题,我们在 高阶组件 的章节说过,可以把一些可复用的逻辑放在高阶组件当中,高阶组件包装的新组件和原来组件之间通过 props 传递信息,减少代码的重复程度。 对于第二个问题,我们得弄清楚一件事情,到底什么样的组件才叫 阅读全文
posted @ 2018-04-13 14:45 何塞穆里尼奥 阅读(5775) 评论(0) 推荐(2) 编辑
摘要: 既然要把 store 和 context 结合起来,我们就先构建 store。在 src/index.js 加入之前创建的 createStore 函数,并且构建一个 themeReducer 来生成一个 store: themeReducer 定义了一个表示主题色的状态 themeColor,并且 阅读全文
posted @ 2018-04-13 14:29 何塞穆里尼奥 阅读(1256) 评论(0) 推荐(0) 编辑
摘要: 可以看到 Redux 并不复杂,它那些看起来匪夷所思的设定其实都是为了解决特定的问题而存在的,我们把问题想清楚以后就不难理解它的那些奇怪的设定了。这节开始我们来看看如何把 Redux 和 React.js 结合起来,你会发现其实它们也并不复杂。 回顾一下,我们在 前端应用状态管理 —— 状态提升 中 阅读全文
posted @ 2018-04-13 14:15 何塞穆里尼奥 阅读(891) 评论(2) 推荐(0) 编辑
摘要: 不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux。我们从一个非常原始的代码开始,不停地在发现问题、解决问题、优化代码的过程中进行推演,最后把 Redux 模式自己总结出来了。这就是所谓的 Redux 模式,我们再来回顾一下这几节我们到底干了什么事情。 我们从一个 阅读全文
posted @ 2018-04-13 14:07 何塞穆里尼奥 阅读(365) 评论(1) 推荐(1) 编辑
摘要: 经过了这么多节的优化,我们有了一个很通用的 createStore: 它的使用方式是: 我们再优化一下,其实 appState 和 stateChanger 可以合并到一起去: stateChanger 现在既充当了获取初始化数据的功能,也充当了生成更新数据的功能。如果有传入 state 就生成更新 阅读全文
posted @ 2018-04-13 13:42 何塞穆里尼奥 阅读(390) 评论(0) 推荐(1) 编辑
摘要: 接下来两节某些地方可能会稍微有一点点抽象,但是我会尽可能用简单的方式进行讲解。如果你觉得理解起来有点困难,可以把这几节多读多理解几遍,其实我们一路走来都是符合“逻辑”的,都是发现问题、思考问题、优化代码的过程。所以最好能够用心留意、思考我们每一个提出来的问题。 细心的朋友可以发现,其实我们之前的例子 阅读全文
posted @ 2018-04-13 10:42 何塞穆里尼奥 阅读(354) 评论(0) 推荐(2) 编辑