原始项目
这是非常简单的一个项目,就是一个计数器,只有两个文件package.json
和index.ios.js
,点击加1
按钮数字值就会+1,点击减1
按钮数字值就会-1,点击归零
按钮则数字值置为0;
index.ios.js
代码:
import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View,TouchableOpacity } from 'react-native'; class Main extends Component { constructor(props) { super(props); this.state = { count: 5 } } _onPressReset() { this.setState({ count: 0 }) } _onPressInc() { this.setState({ count: this.state.count+1 }); } _onPressDec() { this.setState({ count: this.state.count-1 }); } render() { return ( <View style={styles.container}> <Text style={styles.counter}>{this.state.count}</Text> <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}> <Text>归零</Text> </TouchableOpacity> <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}> <Text>加1</Text> </TouchableOpacity> <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}> <Text>减1</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,alignItems: 'center',justifyContent: 'center',flexDirection: 'column' },counter: { fontSize: 50,marginBottom: 70 },reset: { margin: 10,backgroundColor: 'yellow' },start: { margin: 10,stop: { margin: 10,backgroundColor: 'yellow' } }) AppRegistry.registerComponent('Helloworld',() => Main);
添加redux
先添加redux
相关依赖库,在package.json
里添加三个库并在目录下npm install
:
"dependencies": { ... "react-redux": "^4.4.5","redux": "^3.5.2","redux-logger": "^2.6.1" },
再创建actionsTypes.js
用来定义所有的action
名称,定义三个action
,一个增加,一个减小,一个重置:
export const INCREASE = 'INCREASE'; export const DECREASE = 'DECREASE'; export const RESET = 'RESET';
创建actions.js
,在里面创建三个action
:
import { INCREASE,DECREASE,RESET } from './actionsTypes'; const increase = () => ({ type: INCREASE }); const decrease = () => ({ type: DECREASE }); const reset = () => ({ type: RESET }); export { increase,decrease,reset }
创建reducers.js
,根据需要在收到相关的action
时操作项目的state
:
import { combineReducers } from 'redux'; import { INCREASE,RESET} from './actionsTypes'; // 原始默认state const defaultState = { count: 5,factor: 1 } function counter(state = defaultState,action) { switch (action.type) { case INCREASE: return { ...state,count: state.count + state.factor }; case DECREASE: return { ...state,count: state.count - state.factor }; case RESET: return { ...state,count: 0 }; default: return state; } } export default combineReducers({ counter });
创建store.js
:
import { createStore,applyMiddleware,compose } from 'redux'; import createLogger from 'redux-logger'; import rootReducer from './reducers'; const configureStore = preloadedState => { return createStore ( rootReducer,preloadedState,compose ( applyMiddleware(createLogger()) ) ); } const store = configureStore(); export default store;
至此redux
的几大部分都创建完毕,下一步就是引入项目中. 创建app.js
和home.js
.
index.ios.js更改:
import { AppRegistry } from 'react-native'; import App from './app'; AppRegistry.registerComponent('Helloworld',() => App);
app.js
import React,{ Component } from 'righteact'; import { Provider } from 'react-redux'; import Home from './home'; import store from './store'; export default class App extends Component { render() { return ( <Provider store={store}> <Home/> </Provider> ); } }
home.js在原来index.ios.js
的代码上修改成如下:
import React,{ Component } from 'react'; import { StyleSheet,TouchableOpacity } from 'react-native'; import { connect } from 'react-redux'; import { increase,reset } from './actions'; class Home extends Component { _onPressReset() { this.props.dispatch(reset()); } _onPressInc() { this.props.dispatch(increase()); } _onPressDec() { this.props.dispatch(decrease()); } render() { return ( <View style={styles.container}> <Text style={styles.counter}>{this.props.counter.count}</Text> <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}> <Text>归零</Text> </TouchableOpacity> <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}> <Text>加1</Text> </TouchableOpacity> <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}> <Text>减1</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ ... }) const mapStateToProps = state => ({ counter: state.counter }) export default connect(mapStateToProps)(Home);
OK,大功告成,commond+R
运行,command+D
打开chrome
浏览器调试,可以看到redux-logger
把每个action
动作都打和state
的前后变化印出来了,非常直观方便.