react-native redux学习心得

最新推荐文章于 2020-09-09 21:29:15 发布

1华仔11

最新推荐文章于 2020-09-09 21:29:15 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react native redux

本文链接：https://blog.youkuaiyun.com/qq_14990527/article/details/77125598

react native 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在React Native项目中引入Redux进行状态管理，包括环境搭建、关键组件使用及实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求创建一个react native的工程

react native init HolleWord

2.cd HolleWord的工程下面就像安装redux需要的组件，利用npm进行下载

npm install redux --save

npm install react-redux --save

npm install redux-logger --save

npm install redux-thunk --save

注意：redux包主要的功能是提供资源管理器的主要的组件比如：

createStore, applyMiddleware, compose
bindActionCreators

react-redux包主要为react应用开发的关联包，主要提供的组件如下：

Provider，connect

connect是为了：连接React组件与redux store

Provider干的事：接收store，并将store传到子组件中，当store发生变化时，更新store；所以子组件具有store的dispatch方法。问题1）解决。 

connect干的事：定义了一个新的组件Connect，经过一系列的merge后，将各种值挂载props上传递到原组件。 Connect组件会保存state状态，同时监听Redux Store的变化，从而触发原组件的更新。在componentDidMount中监听Provider提供的store的变化。通过Context来访问store。响应函数为handleChange，handleChange里接收到通知后，将Connect组件的state改变为新的state，这里会有调用this.setState的操作。问题2）3）4）初步解决。 

最后一个问题，官方说法是，既然用了Redux就应该用Redux控制所有状态，不手动render页面；也有人说不应该拘泥于API，在合适的时候可以调用this.setState方法，也确实有些例子是这么做的

redux-logger，redux-thunk都是属于redux的插件，redux-logger是打印日志的插件，redux-thunk是主要提供处理异步请求的函数dispatch。

3.在应用中需要创建三个关于使用redux的文件，action ，reducer，store

4.用一个加减进行举例：

action中的代码：actionTyles,js 中的代码如下

export const ADD =
'add';
export const DEC =
'dec';
export const RESET =
'reset';

actions.js 的代码如下

const add = ()=>({type:types.ADD});
const dec = ()=>({type:types.DEC});
const reset = ()=>({type:types.RESET});


export {

add,
dec,
reset
}

5.对reducer中的代码如下：

//根据需要再收到相关的action时操作项目

import {combineReducers} from
'redux'
import *as types from
'../action/actionTypes'

const defaultState = {

count:5,
factor:1,

};

function counter(state = defaultState,action) {

switch(action.type){

case types.ADD:return{...state,count:state.count+state.factor};
case types.DEC:return{...state,count:state.count-state.factor};
case types.RESET:return {...state,count:0};
default:return state;

}
};


export default 
combineReducers({

counter
});

因为我这里只用一个reducer的文件，所以我直接用combinReducers包装起来进行输出，一般都是吧进行对combineReducers是要把所有的reducer的文件都要放在

combineReducers({

counter

。。。。。

});

这里面。比如

import {
    combineReducers,
} from 'redux';

import user from
'./user';
import tabBar from
'./tabBar';
import loading from
'./loading';
import info from
'./info';

const rootReducer =
combineReducers({
    user,
    tabBar,

    // 占位视图
loading,
info,
    // 功能性

});

export default rootReducer;

6.进行对store进行配置，store.js

import thunk from
'redux-thunk';
import logger from
'redux-logger';
import rootReducer from
'../reducer/reducer';
import { createStore, applyMiddleware, compose } from
'redux';

let store =
createStore(rootReducer, {},
compose(
applyMiddleware(thunk,logger),
window.devToolsExtension ? window.devToolsExtension() :
f => f
));
export default store;

7. 对整个程序的入口组建进行编码app.js

import React, { Component } from
'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

import store from
'../stroe/store';
import {Provider} from
'react-redux';
import Tabbar from
'./Main'


export default 
class RootApp 
extends Component {
render() {
return (
<Provider
store = {store}>
<Tabbar
/>
</Provider>
);
}
}

const styles =
StyleSheet.create({
container: {
flex: 1,
justifyContent: 
'center',
alignItems: 'center',
backgroundColor: 
'#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 
5,
},
});

8.编辑主要++，--的组件，然后让组件和redux store进行相关联。代码如下

import React, { Component } from
'react';
import {
AppRegistry,
StyleSheet,
Text,

TouchableOpacity,
View
} from 'react-native';


import * as Color from
'../Common/Color';
import {add,dec,reset} from
'../action/actions';

import {connect} from
'react-redux';

class mian
extends Component {

constructor (props) {
super(props);
};

static navigationOptions = {

title:'redux',
rightTitle:'fs'
}



render() {

const { params } = this.props.navigation.state;
return (
<View 
style={styles.container}>

<Text>{params.user}</Text>
<Text 
style={styles.welcome}>
{this.props.counter.count}

</Text>

<TouchableOpacity
activeOpacity = {0.5}
onPress = {()=>this.reduce()}>
<Text 
style={styles.instructions}>
减1
</Text>
</TouchableOpacity>

<TouchableOpacity
activeOpacity = {0.5}
onPress = {()=>this.add()}>
<Text 
style={styles.instructions}>
加一
</Text>
</TouchableOpacity>

<TouchableOpacity
activeOpacity = {0.5}
onPress = {()=>this.set()}>
<Text 
style = {styles.instructions}>
为0
</Text>
</TouchableOpacity>
</View>
);

}
add() {

this.props.dispatch(add());
}

set(){
this.props.dispatch(reset());
}

reduce() {
this.props.dispatch(dec());

}
}

const styles =
StyleSheet.create({
container: {
flex: 1,
justifyContent: 
'center',
alignItems: 'center',
backgroundColor: 
'#F5FCFF',
},
welcome: {
fontSize: 50,
textAlign: 'center',
color:Color.color_12,
margin: 10,
},
instructions: {
marginTop:10,
textAlign: 'center',
color: Color.color_11s,
fontSize:20,
marginBottom: 
5,
},
});

const mapStateToProps =
state => ({
counter: state.counter
})


export default 
connect(mapStateToProps)(mian);

connct主要的作用就是把组件和store进行相关联，然后用this.props能取到reducer的数据和和调用action中的方法。

mapStateToprops这个方法主要是吧store中的reducer中的数据进行影射到this。prop中，可以采用this。props。数据源名称。

mapDispatchToProps主要是吧store中的action的中的方法进行映射，让我们可以采用this。props。方法

connect的使用一般是connect（mapStateToProps，mapDispatchToProps）（组件的名称）；代码举例：

import {connect} from
'react-redux'; //connect是为了：连接React组件与redux store

import {bindActionCreators} from
'redux'; //Redux中的bindActionCreators，是通过dispatch将action包裹起来，这样可以通过bindActionCreators创建的方法，直接调用dispatch(action)(隐式调用）。



import {tabBarChange} from
'./../action/TabBarAction'


export default 
connect((state) 
=> {
return {
tabBar: state.tabBar,
};
}, (dispatch) 
=> {
return {
actions: bindActionCreators({
tabBarChange,
}, dispatch),
};
})(TabBar);