Super Simple React Native Redux Example

Update 14/12/2018: Fixed code errors spotted by Enjin Nine… thank you very much!

In this article we explore the barest of solutions to get started with React Native + Redux. The only pre-requisite to the below is to have “create-react-native-app” installed (https://facebook.github.io/react-native/docs/getting-started.html)

Setup

create-react-native-app superSimple
cd superSimple
npm install --save redux react-redux

	import {
	applyMiddleware,
	combineReducers,
	createStore,
	} from 'redux';

	// actions.js

	export const testAction = () => ({
	type: 'TEST_ACTION',
	});

	// reducers.js
	export const dvas0004 = (state = {}, action) => {
	switch (action.type) {
	case 'TEST_ACTION':
	return {
	content: "Hi From TEST"
	};
	default:
	return state;
	}
	};

	export const reducers = combineReducers({
	dvas0004,
	});

	// store.js
	export function configureStore(initialState = {}) {
	const store = createStore(
	reducers,
	initialState
	)
	return store;
	};

	export const store = configureStore();

view raw

redux.js

hosted with ❤ by GitHub

	import React from 'react';
	import { StyleSheet, Text, View } from 'react-native';

	import { connect } from 'react-redux';

	import {
	testAction,
	} from './redux';

	import { Provider } from 'react-redux';
	import { store } from './redux';

	class AppInner extends React.Component {
	render() {
	return (
	<View style={styles.container}>
	<Text>Open up App.js to start working on your app!</Text>
	<Text>Changes you make will automatically reload.</Text>
	<Button onPress={this.props.testAction}>Test</Button>
	<Text> {this.props.content}</Text>
	</View>
	);
	}
	}

	export default class App extends React.Component {
	render() {
	return (
	<Provider store={store}>
	<AppContainer />
	</Provider>
	);
	}
	}

	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: '#fff',
	alignItems: 'center',
	justifyContent: 'center',
	},
	});

	// AppContainer.js
	const mapStateToProps = (state) => ({
	content: state.dvas0004.content \|\| "Please Wait…",
	});

	const mapDispatchToProps = (dispatch) => {
	return {
	testAction: () => {
	dispatch(testAction())
	}
	}
	};

	const AppContainer = connect(
	mapStateToProps,
	mapDispatchToProps
	)(AppInner);

view raw

App.js

hosted with ❤ by GitHub

In most create-react-native-app + redux tutorials that I researched, most mentioned the use of index.android.js or index.ios.js to connect Redux to the React App component. These files are not automatically created by create-react-native-app so I wanted to avoid introducing them.
The solution was to create a new “inner component” which I named AppInner in lines 13-23 above. This component contains the JSX of the original App component, which you can extend to contain whatever content you wish
Next, we use the connect function to map state and dispatch to props in the AppInner component (lines 57-60).
Finally, we change the original App component to point towards the component created by the connect step above (AppContainer in my example above – line 57). Notice how we wrap this in a Provider component to make the store available