将某些内容传递到React/Redux中的主app.js文件

Question

是否有任何方法可以将redux状态传递到react/redux中的主app.js文件？我不想基于redux状态更改类名。我甚至尝试过与本地存储相结合，但仍然无法做出令人满意的解决方案。

这是我的主要app.js文件

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

如果您需要封装在Provider中的组件中的redux状态，那么您可以考虑将Provider组件移动到最初呈现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)

Answer 2

您已经在应用程序中使用了store using provider。因此，您可以使用：

store.getState().redux_state_name