Передача чего-либо в основной файл app.js в React / Redux

Question

Есть ли способ передать избыточное состояние в основной файл app.js в Reaction / 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, то вы можете рассмотреть возможность перемещения компонента 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.getState().redux_state_name