Redux mapStateToProps call only once

Hello,

Hello,

It's been 2 days that I'm stuck with an issue implementing redux in my react native application. I checked many topics but I can't fix my problem.

The problem is that mapStateToProps is called only once but it's not called anymore after executing action. My reducer is called but the state is not updating.

I test my work on android with android studio and emulator.

Here is my code :

App.js:

  <Provider store={createStore(reducers)}>
    <View>
         <MainScreen />
    </View>
  </Provider>

HeaderReducer:

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SET_HEADER:
      return action.payload;
    default:
      return state;
 }

};

reducers/index.js

import { combineReducers } from 'redux';
import HeaderReducer from './HeaderReducer';

export default combineReducers({
headerText: HeaderReducer,
});

actions/index.js

export const SET_HEADER = 'set_header';

export const setHeaderText = (title) => {
return {
type: SET_HEADER,
payload: title,
};
};

MainScreen.js

import * as actions from '../actions';

...
<Text> {this.props.headerText} </Text>
<Button
onPress={() => {
this.props.setHeaderText(screen: ${SELECTED_PAGE.profile});
this.forceUpdate();
}}
>

...

const mapStateToProps = (state) => {
const { headerText } = state;
return { headerText };
};

export default connect(mapStateToProps, actions)(MainScreen);

I know that I don't need to forceUpdate in the onPress callback but it's just to check the state after call the function.

So when the application start the reducers are called and my mapStateToProps is working. But when I click on my button, my reducers are called, the good action is executed in the switch but my mapStateToProps is not called anymore. When I click a second time if I console.log the state in my reducer I can see that the state is not updated but stay the same than the INITIAL_STATE.

I don't mutate the state in my reducers, I connected everything in my MainScreen.js and I wrapped my app in Provider with store.

I follow a tutorial on Udemy to implement reduc in my app and even I check the code of the tuto on github, I can't find out where the issue is from (https://github.com/StephenGrider/ReactNativeReduxCasts/tree/master/tech_stack)

I think I miss something really obvious but I can't find out what's wrong since 2 days :/

If someone can help, I would appreciate :)

Thanks.

How to Share Code Between React and React Native

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.

How to Share Code Between React and React Native

Sharing Code Between React and React-Native: What Not to Share - Ben Ellerby

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.

In this talk I will give real examples from my work with MADE.COM, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic

Sharing Code Between React and React Native

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.

React Native vs Flutter | Difference Between React Native & Flutter

React Native vs Flutter | Difference Between React Native & Flutter

This video on React Interview Questions will help you crack your next React interview with ease. React is the most popular front-end JavaScript library today and is being adopted by many big companies like Netflix, Airbnb, New York Times, and many more...

This video on React Interview Questions will help you crack your next React interview with ease. React is the most popular front-end JavaScript library today and is being adopted by many big companies like Netflix, Airbnb, New York Times, and many more. It is also used in small projects by web developers to showcase their skills in the field of web development. The video includes general React interview questions as well as questions focused on Redux, Hooks, and Styling. This video is ideal for both beginners as well as experienced professionals who are appearing for React web development job interviews. Learn the most important React interview questions and answers and know what will set you apart in the interview process.

I am unable to use geolocation in react-native with redux

I am using geolocation in react-native with redux, but I am getting 2 problems..

I am using geolocation in react-native with redux, but I am getting 2 problems..

  1. It's showing wrong latitude and longitude in my android studio emulator, my location is lahore, pakistan but It's showing USA location.
  2. When i signed it apk file and installed that apk file in my mobile then It's not showing any location, empty.

Can anyone help me?

Here is my code..!

Reducer.js

let initialState = {
    lng: null,
    lat: null,
}

export default function prayerTimes(state = initialState, action) {
switch (action.type) {

     case GET_LOCATION:
         return {
            ...state,
            lat: action.lat,
            lng: action.lng
     }

}

}

Action.js

export function getLocation() {
return dispatch => {
navigator.geolocation.getCurrentPosition((position) => {
dispatch({
type: GET_LOCATION,
lat: position.coords.latitude,
lng: position.coords.longitude
});
});
};
}

App.js

componentDidMount() {
const { getLocation } = this.props;
getLocation();
}

render() {
const { lng, lat } = this.props;
return (
<View style={{justifyContent: 'center'}}>
<Text style={{color: 'white'}}>Latitude: {lat}</Text>
<Text style={{color: 'white'}}>Latitude: {lng}</Text>
</View>
);
}