将一些东西传递给React / Redux中的主app.js文件

Question

Is ther a any way to pass redux state to main app.js file in react/redux? I wan't to change classname based on redux state. I tried to combine even with local storage but still can't make a satisfying solution.

This is my main app.js file

class App extends Component {

    render() {
        return (

            <Provider store={store}>
                <Router>
                    <div style={{display: 'flex'}} >
                        <Navbar/>
                        <Switch>
                            <Route component={UserIsAuthenticated(MainProfile)} exact path="/profile"/>
                            <Route component={UserIsAuthenticated(MyDiet)} exact path="/diet"/>
                            <Route component={UserIsAuthenticated(AllDiets)} exact path="/alldiets"/>
                            <Route component={UserIsAuthenticated(EditProfile)} exact path="/editprofile"/>
                            <Route component={UserIsAuthenticated(WorkoutPlan)} exact path="/workout"/>
                            <Route component={UserIsNotAuthenticated(Login)} exact path="/login"/>
                            <Route component={UserIsAuthenticated(EditDiet)} exact path="/edit/:id"/>
                            <Route component={UserIsAuthenticated(EditDiet)} exact path="/edit/:id"/>
                            {/*<Route component={UserIsAuthenticated(UsersDiet)} exact path="/usersdiet"/>*/}
                        </Switch>
                    </div>
                </Router>
            </Provider>
        )
    }
}

export default (App)

Answer 1

You're already using store using provider in the app. So, you can use:

store.getState().redux_state_name

Answer 2

If you need the redux state in the component that is wrapped in your Provider then you might consider moving the Provider component to where you initially render your React.

entry.jsx

const store = createStore(...);

ReactDOM.render(
    <Router>
      <Provider store={store}>
        <App/>
      </Provider>
    </Router>,
    document.getElementById('root')
);

app.jsx

class App extends Component {

    render() {
        return (
            <div className={`${this.state.someData ? 'someClassA' : 'someClassB'}`} >
                <Navbar/>
                <Switch>
                    <Route>'s...  
                </Switch>
            </div>
        );
    }
}

const mapStateToProps = state => {
  return {
    someData: state.foo
  }
}

export default connect(
    mapStateToProps,
    null
)(App)