How to get root component to re-render in react-native with redux (Open source project) - react-native

Question

How would you get the root component in React-Native (Expo.io) to re-render on state change when using redux?
I'm trying to get <FormattedWrapper locale='en' messages={messages}> to update "locale" when state is changed.
I have tried to have a local state in the constructor, use store.getState().language.language, have a local variable which got update in ComponentWillUpdate because of a subscribe function from redux, but nothing works.
I have clean it all up and made a PR to the repo I want to contribute to: https://github.com/ipeedy/react-native-boilerplate/pull/3
The App.js code is here:
import React, { Component } from 'react';
import { StatusBar, Platform } from 'react-native';
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/native';
import { FormattedWrapper } from 'react-native-globalize';
import messages from './Messages';
import store from './store';
import Navigator from './Navigator';
import { colors } from './utils/constants';
const Root = styled.View`
flex: 1;
background-color: ${props => props.theme.PINK_50};
`;
const StatusBarAndroid = styled.View`
height: 24;
background-color: ${props => props.theme.PINK_200};
`;
class App extends Component {
render() {
return (
<Provider store={store}>
<ThemeProvider theme={colors}>
<FormattedWrapper locale='en' messages={messages}>
<Root>
<StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
{ Platform.OS === 'android' && Platform.Version >= 20 ? <StatusBarAndroid /> : null }
<Navigator />
</Root>
</FormattedWrapper>
</ThemeProvider>
</Provider>
);
}
}
export default App;
Thanks in advance for any help! :)

Answer 1

Since you're aleady using react-redux, therefore you can use the connect function of the same library.
Since Connect requires a new instance of the component that you are using, therefore it can be done as shown below.
First you need to make a separate component of what's inside your provider and connect it with the store
For example from what I understand in your code
import { Provider, connect } from 'react-redux';
class RootContainer extends Component {
render() {
const {locale} = this.props
return (
<ThemeProvider theme={colors}>
<FormattedWrapper locale={locale} messages={messages}>
<Root>
<StatusBar barStyle='light-content' backgroundColor='transparent' translucent />
{ Platform.OS === 'android' && Platform.Version >= 20 ? <StatusBarAndroid /> : null }
<Navigator />
</Root>
</FormattedWrapper>
</ThemeProvider>
);
}
}
const mapState = state = ({
locale: state.language.language
})
ConnectedRootContainer = connect(mapState, null)(RootContainer);
class App extends Component {
render() {
return (
<Provider store={store}>
<ConnectedRootContainer/>
</Provider>
);
}
}
export default App;
Or another simple way would be just to make the connected component for the <FormattedWrapper/>