Super Simple React Native Redux Example

Posted on by David Vassallo

Inspired by http://blog.tylerbuchea.com/super-simple-react-redux-application-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

redux.js

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

App.js

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

Notes

  • 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