React Native — Redux

react-native init projectName

adb devices

react-native run-android

react-native run-ios

import React, { Fragment, Component } from ‘react’;
import {
SafeAreaView,
StyleSheet,
View,
Button,
Text
} from ‘react-native’;

class App extends Component {
state = { count: 0 };
decrementCount() {
let { count } = this.state;
count++;
this.setState({
count
})
}
incrementCount() {
let { count } = this.state;
count++;
this.setState({
count
})
}
render() {
const { count } = this.state;
return (
<View styles={styles.container}>
<Button
title=”increment”
onPress={() => this.incrementCount()}
/>
<Text>{count}</Text>
<Button
title=”decrement”
onPress={() => this.decrementCount()}
/>
</View>
);
}
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
}
});

export default App;

yarn add react-redux
yarn add redux

npm install react-redux
npm install redux

export const COUNTER_CHANGE = ‘COUNTER_CHANGE’

import { COUNTER_CHANGE } from ‘../constants’;
export function changeCount(count) {
return {
type: COUNTER_CHANGE,
payload: count
}
}

import { COUNTER_CHANGE } from ‘../constants’;
const initialState = {
count: 0
};
const countReducer = (state = initialState, action) => {
switch(action.type) {
case COUNTER_CHANGE:
return {
…state,
count:action.payload
};
default:
return state;
}
}
export default countReducer;

import { createStore, combineReducers } from ‘redux’;
import countReducer from ‘../reducers/countReducer’;
const rootReducer = combineReducers(
{ count: countReducer }
);
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;

import { AppRegistry } from ‘react-native’;
import React from ‘react’;
import App from ‘./App’;
import { name as appName } from ‘./app.json’;
import { Provider } from ‘react-redux’;

import configureStore from ‘./store/configureStore’;

const store = configureStore()

const RNRedux = () => (
<Provider store = { store }>
<App />
</Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

import React, { Component } from ‘react’;
import {
StyleSheet,
View,
Button,
Text
} from ‘react-native’;
import { connect } from ‘react-redux’;
import { bindActionCreators } from ‘redux’;
import * as countActions from ‘./actions/counts’;

class App extends Component {
decrementCount() {
let { count, actions } = this.props;
count — ;
actions.changeCount(count);
}
incrementCount() {
let { count, actions } = this.props;
count++;
actions.changeCount(count);
}
render() {
const { count } = this.props;
return (
<View styles={styles.container}>
<Button
title=”increment”
onPress={() => this.incrementCount()}
/>
<Text style={styles.textCenter}>{count}</Text>
<Button
title=”decrement”
onPress={() => this.decrementCount()}
/>
</View>
);
}
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’
},
textCenter:{
textAlign :’center’
}
});

const mapStateToProps = state => ({
count: state.count.count,
});

const ActionCreators = Object.assign(
{},
countActions,
);
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(ActionCreators, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(App)

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store