Redux以及在reactNative中的简单应用

【redux的安装】

安装redux， 主要包含; redux, react-redux, redux-thunk三个插件； npm依次安装即可

middleWare，redux源码，中间件用来支持异步操作；

----------------------------------------------------------------------------

【在项目中使用Redux】

参考 https://redux.js.org/basics/store 基本介绍

https://redux.js.org/api/createstore API的使用

1.项目入口 AppRegistry.registerComponent('BabyHealth', () => Root);

导入的root文件，需要与redux的store绑定

Root.js中：

该文件中，分别引入了store和app的界面组件；

app.js是一个页面组件，可以是一个路由导航；

store.js中则是对redux管理state状态的仓库 进行初始化和设置

Store.js中:

引入应用中的多个reducer组合及当前文件中引入的rootReducer，一般将不同模块的reducer组合到一个中，用于create的时候与store连接起来；

rootReducer.js

引入了其他多个reducer, 使用combineReducers来连接。（一个应用只有一个store,stroe中可以分多个层级，这个就是通过多个reducers来体现的）；

接下来是app.js中的内容；

app.js中是主要的视图内容，通过render()函数中,return视图；

【Redux理解】

createStore中的三大核心

stroe 管理全局状态的一个对象 （getState 获取state树）

reducer纯函数用来修改对象 ，纯函数中参数， 有一个preState，和action。外部只需要dispatch一个action,告诉纯函数自己是要做什么事情，reducer中，能获取到之前的state并对其做修改。（dispatch action ）

subscribe 修改state之后，通知界面重新渲染。(subscribe)

createStore做的事情主要是;

1. 私有化的管理应用状态；

2.外部可以通过提供的getState()方法来获取状态；

3.通过dispatch action分发状态；

4.针对状态修改之后，处理状态，自动完成对界面希望的更新；

状态控制之后，对状态渲染的控制，是通过对store中新老状态的比较来区分，对要渲染哪一部分视图进行细致化；

----------------------------------------------------------------------------

【Note】

reducer中，返回的对象一定要是全新的对象 使用

Object.assign({}, state, {isLoding: action.isLoading})

第一个参数一定要是空的对象

如果在使用过程中，会经常的对数组或对象做类似的操作，推荐使用 immutability-helper等能深度修改。以下摘自官网描述：

 

参考资料： 腾讯课堂-源码TV 单信 redux讲解；

                  https://redux.js.org/api/createstore redux官方文档

                 https://github.com/liuhongjun719/react-native-BabyHealth- reactNative项目 babyHealty