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

您已经在应用中使用提供者使用商店。因此，您可以使用：

store.getState().redux_state_name

Answer 2

如果您需要将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)

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

2 个答案: