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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
App.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
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