1、安装所需要的相关文件:
npm install --save redux
npm install --save react-redux
npm install --save redux-thunk
2、CounterTypes.js:
export const COUNT_INCRESS = 'COUNT_INCRESS';//+
export const COUNT_DECRESS = 'COUNT_DECRESS';//-
export const COUNT_RESET = 'COUNT_RESET';//R
3、CounterAction.js:
'use strict';
import * as CounterTypes from '../constants/CounterTypes';
export const incress = () => {
return {type: CounterTypes.COUNT_INCRESS};
};
export const descress = () => {
return {type: CounterTypes.COUNT_DECRESS};
};
export const reset = () => {
return {type: CounterTypes.COUNT_RESET};
};
4、CounterReducer.js 根据需要在收到相关的action时操作state:
'use strict';
import * as CouterTypes from '../constants/CounterTypes';
const defaultState = {
count: 5,
factor: 1,
};
export default function counter(state = defaultState, action) {
switch (action.type) {
case CouterTypes.COUNT_INCRESS:
return {
...state,
count: state.count + state.factor,
}
break;
case CouterTypes.COUNT_DECRESS:
return {
...state,
count: state.count - state.factor,
}
break;
case CouterTypes.COUNT_RESET:
return {
...state,
count: 0,
}
break;
default:
return {
...state
}
}
}
5、reducers可以有多个,所以我们需要通过在同级目录下创建index.js,来进行管理多个reduces:
'use strict';
import {combineReducers} from 'redux';
import login from './loginReducer';
import counter from './CounterReducer';
const rootReducter = combineReducers({
login: login,
//类似在Reducer 的login方法都可以写在此处
counter: counter
});
export default rootReducter;
6、创建ConfigureStore.js: 全局仅此一个store:
'use strict';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';
const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
return store;
}
至此redux的几大部分都创建完毕, 非视图部分已基本完成.下一步就是引入项目中. 创建Root.js和Counter.js.
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import configureStore from './store/ConfigureStore';
import App from './container/App';// app的入口
import Count from './container/Counter';// app的入口
const store = configureStore();
export default class Root extends Component {
render() {
return (
)
}
}
注意: 使用Provider将引用的控件包裹起来,传入store属性
8、Counter.jsimport React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import {incress, descress, reset} from './../actions/CounterAction';
import {connect} from 'react-redux'; // 引入connect函数
class Counter extends Component {
constructor(props) {
super(props);
this.state = {count: 5}
}
_onPressReset() {
this.props.dispatch(reset())
}
_onPressInc() {
//为了测试性能,在这里触发一次循环+1000。
for (let i = 0; i < 1000; i++) {
this.props.dispatch(incress())
}
}
_onPressDec() {
this.props.dispatch(descress())
}
render() {
return (
{this.props.counters.count}
this._onPressReset()}>
归零
this._onPressInc()}>
加1
this._onPressDec()}>
减1
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
},
counter: {
fontSize: 50,
marginBottom: 70
},
reset: {
margin: 10,
padding: 10,
backgroundColor: 'yellow'
},
start: {
margin: 10,
padding: 10,
backgroundColor: 'yellow'
},
stop: {
margin: 10,
padding: 10,
backgroundColor: 'yellow'
}
});
const mapStateToProps = state => ({
counters: state.counter
});
export default connect(mapStateToProps)(Counter);
最终实现完成,整理一张图,代码逻辑如下:
注:本文参考: 参考1 参考2
本文github 参考代码
如果有不正确的地方,请斧正。