Do I need to use Redux or Context API

Question

I have an application where users log in first as usual. My app has several screens which are navigated by react-native-navigation.

On every screen other than login, I need to know which user is using my app since the content is specialized by his/her uniqueID. I get that uniqueID when the user successfully login but I don't know how to pass this uniqueID to other screens.

Do I need to use Redux or context API in order to handle this problem or is there another way to pass this data between screens back and forth without changing the project?

Here is my App.js:

import React, { Component, PropTypes } from 'react';
import { AppNavigator } from './components/Navigator';


 class App extends React.Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}
export default App;

Here is my Navigator component:

const Stack = createStackNavigator({

    Main: { screen: MainScreen },
    Login: {screen: LoginScreen},
    Profile: {screen: ProfileScreen},
    NewSurvey: {screen: NewSurveyScreen},
},
    {
        initialRouteName: 'Login',
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
            gesturesEnabled: false,
        }
    })

export const AppNavigator = createAppContainer(Stack);

@ma_dev_15 that's debatable, and that's the issue with this question. Plus, this has already [been asked](https://stackoverflow.com/questions/49568073/react-context-vs-react-redux-when-should-i-use-each-one). — James, Apr 19 '19 at 07:07
okay, to make you more clear, you can get user details in props if you use connect from `redux` and when using `context` you will end up writing `Consumer` inside each component. So, you can decide which will look better? And when ever `Provider` value is changed all the `Consumer` re-renders thats heavy effect on performance https://reactjs.org/docs/context.html#caveats — ma_dev_15, Apr 19 '19 at 07:11
your question is not clear in my opinion, if your problem is just passing data through screens read my answer, but if you mean which one to use(redux - contextAPI) that would be sth else — Amir Hedieh, Apr 19 '19 at 08:24
@James actually the question that you provided is **not** answer of mine since i did not ask which one should i use but i asked is there any solution other than context or redux. — AlkanV, Apr 19 '19 at 16:05
@AlkanV perhaps you should rename the title of the question in that case I think there is a lot of ambiguity between what I presumed you were asking and what you really were. — James, Apr 19 '19 at 16:47

Aditya Sharma · Answer 1 · 2019-04-19T07:24:44.083

2

I think you are using React Navigation as per the code shared. I would suggest you implement auth flow as suggested here and use Redux to set/access the uniqueID. Redux serves a lot more stuff and is used widely for state management.
You can set uniqueID in _signInAsync() and then access it through. LocalStorage can be an option but not a feasible solution as accessing values from LocalStorage may affect app performance.

edited Apr 19 '19 at 07:24

answered Apr 19 '19 at 07:17

Aditya Sharma

645
1
10
28

1

Thank you very much, other than the method mentioned above, i will give a try to yours too. – AlkanV Apr 19 '19 at 08:29

score 2 · Accepted Answer · answered Apr 19 '19 at 08:22

To pass data to other screens you can use React Navigation navigate method and passing some data inside of it.

i don't know how you stored you Data whether using a database like Realm or SQLite etc... but whenever you fetch data from there and you want to pass it to other screens do this like below:

this.props.navigation.navigate('SecondPage', {
        //your data goes here
        });

for example :

this.props.navigation.navigate('Homescreen', {
       username: this.state.username,
       });

and then you can get that data like below:

const username = navigation.getParam('username', 'Default'); //default is a value that will be used if there was no username passed

This is exactly what i need. Since if login successful i navigate to ```MainScreen``` and here i need to render some content which is totally unique to the user. In order to render the content properly i need the method you have mentioned. Thank you very much. — AlkanV, Apr 19 '19 at 08:25

score 1 · Answer 3 · answered May 27 '20 at 19:02

redux or react-context

“Redux is a predictable state container for JavaScript apps.”

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”

For low-frequency updates like locale, theme changes, user authentication, etc. the React Context is perfectly fine. But with a more complex state which has high-frequency updates, the React Context won't be a good solution. Because, the React Context will trigger a re-render on each update, and optimizing it manually can be really tough. And there, a solution like Redux is much easier to implement.

When to use Context API

If you are using Redux only to avoid passing props down to deeply nested components, then you could replace Redux with the Context API

When to use Redux

Redux is a predictable state container, handling your application's logic outside of your components, centralizing your application's state, using Redux DevTools to track when, where, why, and how your application's state changed, or using plugins such as Redux Form, Redux Saga, Redux Undo, Redux Persist, Redux Logger, etc.

In This case we can use Redux.

Do I need to use Redux or Context API

3 Answers3