ReduxDemo
npm install --save redux
npm install --save react-redux
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @format
*/
import React from 'react';
import allReducers from './src/Reduces/AllReducers';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
// @ts-ignore
import {Provider} from 'react-redux';
import Main from './src/Containers/Main';
import Minor from './src/Containers/Minor';
import ViewPage from './src/Containers/ViewPage';
const store = createStore(allReducers, applyMiddleware(thunkMiddleware));
declare var global: {HermesInternal: null | {}};
const App = () => {
return (
<Provider store={store}>
<Main style={{flex: 1}} />
<Minor style={{flex: 1}} />
<ViewPage style={{flex: 1}} />
</Provider>
);
};
export default App;
Actions SyncChangeText.js 异步
import {mainChangeText} from './MainChangeText';
import {minorChangeText} from './MinorChangeText';
export const syncChangeText = () => {
return (dispatch, getState) => {
setTimeout(() => {dispatch(mainChangeText('aaaaaaaaaa'))}, 2000);
setTimeout(() => {dispatch(minorChangeText('bbbbbbbbbb'))}, 4000);
};
};
//同步
export const MINOR_CHANGE_TEXT = 'MINOR_CHANGE_TEXT';
export const minorChangeText = (text) => {
return {
type: MINOR_CHANGE_TEXT,
text,
};
};
Minor.js Containers
import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {connect} from 'react-redux';
import {minorChangeText} from '../Actions/MinorChangeText';
import {syncChangeText} from '../Actions/SyncChangeText';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#BBBBBB',
},
});
class Minor extends Component {
render() {
return (
<View style={styles.container}>
<View style={{flex:1}} />
<Text>{this.props.textData}</Text>
<TouchableOpacity
onPress={() => {
this.props.doChangeText('2222222222');
}}>
<Text style={{height:30}}>改变文字按钮</Text>
</TouchableOpacity>
<View style={{flex:1}} />
<TouchableOpacity
onPress={() => {
this.props.doSyncChangeText();
}}>
<Text style={{height:30}}>异步改变文字按钮</Text>
</TouchableOpacity>
<View style={{flex: 1}} />
</View>
);
}
}
// 获取 state 变化
const mapStateToProps = state => {
return {
textData: state.minorReducer.text,
};
};
// 发送行为
const mapDispatchToProps = dispatch => {
return {
doChangeText: t => dispatch(minorChangeText(t)),
doSyncChangeText: () => dispatch(syncChangeText()),
};
};
// 进行第二层包装,生成的新组件拥有 接收和发送 数据的能力
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Minor);
AllReducers.js
import { combineReducers } from 'redux';
import mainReducer from './MainReducer';
import minorReducer from './MinorReducer';
import viewPageReducer from './ViewPageReducer';
const allReducers = combineReducers({
mainReducer,
minorReducer,
viewPageReducer,
});
export default allReducers;
