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(); |
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); |
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