Is it right way to pass Redux store via React Context in Root Component?

Question

I'm scaffolding a large scale React application. In fact it is a advanced level of admin panel, I wanna use Redux for handling the global state of application and Redux Saga for asynchronous actions.

Few days ago I saw an article in medium, Which it's about new React Context API, It's awesome and useful.

Also I saw a useful Stack Overflow question about using React Context, Here is about React Context vs React and my situation is some different.

In my case I wanna use Redux for controlling global state of application like login, global data and etc, and passing these data to all of components tree with React Context, is it a right way? is there a better way to leverage?

score 3 · Accepted Answer · answered Jul 04 '18 at 06:26

react-redux internally uses context to pass on the data to the component. With redux you can make use of connect and supply the data to the component that needs it. Its not necessary to use context for this purpose

For instance you have a Admin component, you can pass state values to it like

import { connect } from 'react-redux';

class Admin extends React.Component {
    ...
}

const mapStateToProps = (state) => {
    return {
        isLoggedIn: state.isLoggedIn
    }
}

export default connect(mapStateToProps)(Admin);

You can learn more about it here

Is it right way to pass Redux store via React Context in Root Component?

1 Answers1