最近在试着学习reactnative,公司应用比较重,采用了redux的方案,传统原生转到web思维
还是比较费劲的,所以分享下一个简单的redux的demo,希望有助于 redux的使用.
react-native的环境搭建就不bb了,自己init 一个reactnative的实例出来先,并装好我们要使用的库
reactnative init easyRedux
npm install redux --save
npm install react-redux --save
npm install redux-thunk --save
分为4个部分,actions,components,containers,reducers
components 是我们要使用的组件,从这一层开始看
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
const styles = StyleSheet.create({
button:{
width:50,
height:50,
backgroundColor:'red'
},
view:{
flex:1,
justifyContent:'center',
alignItems:'center',
flexDirection:'row'
}
});
export default class Counter extends Component{
constructor(props){
super(props);
}
render(){
const {counterReducer,increment,decrement} = this.props;
return(
<View style={styles.view}>
<TouchableOpacity onPress={increment} style={styles.button}>
<Text>up</Text>
</TouchableOpacity>
<Text>{counterReducer}</Text>
<TouchableOpacity onPress={decrement} style={styles.button}>
<Text>down</Text>
</TouchableOpacity>
</View>
);
}
}
我们注册了一个组件Counter,里面是两个有点击效果的text 加减 和一个显示结果的text
我们从props里传入了2个action方法(加法和减法),和一个conterReducer的显示
在action里我们定义了2个动作,actionTypes里是两个const字符串
import * as types from './actionTypes';
export function increment(){
return{
type:types.INCREMENT
};
}
export function decrement(){
return{
type:types.DECREMENT
};
}
action触发的操作在 ,通过判断类型,来执行不同的reducer操作
import * as types from '../actions/actionTypes';
const initialState = {
count:0
};
export default function counterReducer(state = initialState,action = {}){
switch(action.type){
case types.INCREMENT:
return{
...state,
count:state.count+1
}
case types.DECREMENT:
return{
...state,
count:state.count-1
}
default:
return state;
}
}
然后我们要在我们的容器里,引入我们的组件component
import React,{Component} from 'react';
import {bindActionCreators}from 'redux';
import Counter from '../components/counter';
import * as counterActions from '../actions/counterActions';/* 引入actions*/
import {connect} from 'react-redux';
class CounterApp extends Component{
constructor(props){
super(props);
}
render(){
const {state,actions} = this.props;/* 解包state和actions*/
return(
<Counter counterReducer = {state.count} {...actions}/>
);
}
}
/* 连接reducer 和 actions*/
export default connect(
(state=>({state:state.counterReducer})),
(dispatch)=>({actions:bindActionCreators(counterActions,dispatch)})
)(CounterApp);
最后包装成app,让index.ios.js应用
import React,{Component} from 'react';
import {createStore,applyMiddleware,combineReducers}from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import CounterApp from './counterApp';
import * as reducers from '../reducers';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
export default class App extends Component{
render(){
return(
<Provider store = {store}>
<CounterApp />
</Provider>
);
}
}
最近比较忙,先简单的放上来,等之后有空开始扩展和详细介绍,做个随意的开篇
