React-Native开发总结-redux层面上的问题

更新时间：2017年11月08日17:31:16

    开发过react和react native的同学都知道，当应用比较大的时候，组件的状态(数据)会很难管理，尤其对于那些在组件间进行通信的数据，更难以把控(增加、删除、修改、查询)。办法总比困难多，出现问题，一定会出现解决问题的方法。redux的出现，正是为解决这一问题。

1、综述

    redux是站在应用整体的高度来管理全部组件的状态或数据、组件之间的顶层通信解决方案；

    store是存储以对象树形式呈现的state；

    action是修改state的惟一方法;它是一个普通的JS对象，用来描述发生了什么；

    reducers是描述action如何修改state树；它接收state和action，并返回新的state的函数；

2、实践

    根组件注册redux，并且传入所有state，<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。根组件应该嵌套在 <Provider> 中，其他组件才能使用 connect() 方法：

import {Provider} from 'react-redux'

import store from './src/redux/store/index.js'

inport Router from './routes'

render(){

return(<Provider store={store}><Router/></Provider>)

}

    子路由使用redux，connect用于连接 React 组件与 Redux store，connect函数被调用两次，第一次是设置参数，第二次是组件与 Redux store 连接：

import {connect} from 'react-redux'

export default connect(state=>{userInfo: state.userInfo})(HomePage)

this.props.userInfo就可以拿到数据

3、redux API

    cerateStore创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store；

    combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。

4、使用redux意义

    数据统一管理；

    替代setState方法，提升组件性能，当redux中的数据发生变化，UI界面的相应数据也同时发生改变，而不用人为触发setState；

5、redux数据操作规范

    redux数据属于单向数据流，不能直接操作数据，比如：

import store from './store'

let store = sotre.getState();

console.log(store.homepage.data);//{name:'wanshaobo'}

let data = store.homepage.data

data.name = ''wanshaobo123';

save(data);//非法操作，无效操作，store树中存储的值还是wanshaobo

reducers:

case:SAVE_DATA

return Object.assign({},state,{data});

action:

save(data){

store.dispatch({type:SAVE_DATA,data})

}

    save(data)属于非法操作，无效操作，store树中存储的值还是wanshaobo，正确操作方案需要将redux中的数据深拷贝到本地，然后将本地的数据重新赋值给redux中，如下：

let data = JSON.parse(JSON.stringify(store.homepage.data));

6、操作redux数据中对象的某一个值

    改变redux数据中的name属性，initState={person:{name:'wanshaobo',age:28}}

方案一：

save({name:'wanshaobo888',age:this.props.homepage.person.age});//store.getState().homepage.person.age

方案二：

let data = this.props.homepage.person;

data.name = 'wanshaobo888';

save(data);