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

ゞ浴缸里的玫瑰 2022-06-06 12:15 165阅读 0赞

*更新时间：2018年02月02日10:39:00*

[《我的博客地图》][Link 1]

开发过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);

方案三：

引入第三方库immutability-helper

import update from 'immutability-helper'

function saveData(state=\{name:'',age:''\},action)\{

switch(action.type)\{

case MODIFY\_NAME:

return update(state,\{name:\{$set:action.value\}\})

case MODIFY\_AGE:

return update(state,\{age:\{$set:action.value\}\})

case CLEAE\_DATA:

return update(state,\{name:\{$set:''\},age:\{$set:''\}\})

case GET\_DATA:

return update(state,\{name:\{$set:action.data.name\},age:\{$set:action.data.age\}\})

default:

return state;

7、redux数据发生变化，但UI没有重新渲染

redux数据发生变化，UI重新渲染(执行render方法)的前提，redux中的数据state的地址指针的地址发生了变化，如下操作方案：

let data = this.props.qaData;

data.push(\{data:item.questions,position:'left',type:'array'\});

setQaData(data);

redux更新数据的方法setQaData已经执行，但是UI没有重新渲染(没有执行render方法)，原因在于setQaData(data)中的data的地址和redux中data的地址相同，redux认为数据没有发生变化，UI界面不需要重新渲染；

改进方案一：

let data = this.props.qaData;

data = data.push(\{data:item.questions,position:'left',type:'array'\});

setQaData(JSON.parse(JSON.stringify(data)));//强制改变地址指针

改进方案二：

let data = this.props.qaData;

let newData = \[...data,\{data:item.questions,position:'left',type:'array'\}\];//新建数组，改变了地址指针，扩展运算符用于深拷贝

setQaData(newData);

8、父子组件数据通信

redux解决数据层面的问题，父子组件的数据应当统一归父组件管理，数据统一入口放在父组件中；这样UI和数据就完全分离；

9、常见问题

action文件中，当类型和方法过多时，代码看起来比较臃肿，可以采用以下方案：

export const obj = \{type:\{A\_ACTION:'A\_ACTION'\},method:\{\}\}

每个action的type值最后会统一注入redux中，因此会出现不同action的type值相同，造成命名空间冲突，导致reducer执行误操作，解决方案，type命名规范化：

A.js

export let A\_CHANGE\_DATA = 'A\_CHANGE\_DATA'

B.js

export let B\_CHANGE\_DATA = 'B\_CHANGE\_DATA'

10、数据流向方案

通用组件，数据源来自于redux的store

export default connect(state => (\{  
data: state.qa.data  
\}))(B);

专属组件，数据源来自于父组件传递的props

未完，待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ReactNative布局样式总结

相关 ReactNative进阶（八）：redux在react-native上的connect使用

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

相关 React-Native开发总结-react层面上的问题

相关 React-Native开发总结-html层面上的问题

相关 React-Native开发总结-原生APP层面上的问题

相关 Redux总结

相关一篇文章总结redux、react-redux、redux-saga

相关 ReactNative应用开发总结

相关 react-redux总结