reagieren - redux - thunk ändern Hintergrund der Seite die prägnante Art

Question

Ich versuche, meine Seite Hintergrundfarbe ändern, so dass die Initialisierungsseite einen anderen Hintergrund hat.

Meine LogoPage Komponente:

import PropTypes from "prop-types"; 
import React from "react"; 

import ReactOnRails from "react-on-rails"; 
import LocationContainer from "../containers/LocationContainer"; 

const LogoPage =() => { 
    return (
    <div className="logoPage"> 
     <h1>Name</h1> 
     <LocationContainer /> 
    </div> 
); 
}; 

LogoPage.propTypes = {}; 

export default LogoPage; 

Dies wird angezeigt, wenn die App den Benutzer GPS-Position versucht, von der Landingpage-Komponente aufgerufen zu holen:

import PropTypes from "prop-types"; 
import React from "react"; 

import ReactOnRails from "react-on-rails"; 
import NikelesContainer from "../containers/NikelesContainer"; 
import LogoPageContainer from "../containers/LogoPageContainer"; 

const Landing = props => { 
    if (props.latitude && props.longitude) { 
    return (
     <div className="body"> 
     <NikelesContainer /> 
     </div> 
    ); 
    } else { 
    return (
     <div className="body"> 
     <LogoPageContainer /> 
     </div> 
    ); 
    } 
}; 

Landing.propTypes = { 
    latitude: PropTypes.number, 
    longitude: PropTypes.number 
}; 

export default Landing; 

Die LogoPageContainer:

import { connectWithLifecycle } from "react-lifecycle-component"; 

import LogoPage from "../components/LogoPage"; 
import setRedBackground from "../actions/backgroundActions" 
import setTransparentBackground from "../actions/backgroundActions" 

// Which part of the Redux global state does our component want to receive as props? 
const mapStateToProps = (state, props) => { 
    return {}; 
}; 

const componentWillMount =() => { 
    setRedBackground(); 
}; 

const componentWillUnmount =() => { 
    setTransparentBackground(); 
}; 

// const actions = Object.assign(locationActions, lifecycleMethods); 
export default connectWithLifecycle(mapStateToProps, { 
    componentWillMount, 
    componentWillUnmount 
})(LogoPage); 
// export default connectWithLifecycle(mapStateToProps)(LogoPage); 

der HintergrundAktionen:

Dies funktioniert nicht einmal, da ich auch Redux-Aktionen nachmachen müsste, Das scheint mir ein totaler Overkill zu sein, um einen Versand zu haben, wenn ich die Hintergrundfarbe ändere, und das tue ich nicht muss die Hintergrundklasse im Redux Repo gespeichert haben.

Aber wenn ich legte den document.body.className = .. direkt in den Rückruf:

const componentWillMount =() => { 
    document.body.className = "red-background"; 
}; 

Ich erhalte eine Fehlermeldung, dass

Aktionen Ebene Objekte sein müssen. Verwenden Sie benutzerdefinierte Middleware für Asynchron-Aktionen

Was ein einfacher Weg sein würde, dies zu erreichen?

EDIT:

mein store.jsx

import { compose, combineReducers, applyMiddleware, createStore } from "redux"; 
import thunkMiddleware from "redux-thunk"; 

import nikeles from "../reducers/nikeles"; 
import location from "../reducers/location"; 
import page from "../reducers/page"; 

const store = railsProps => { 
    const composedStore = compose(
    applyMiddleware(thunkMiddleware), 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
); 

    const combinedReducers = combineReducers({ 
    location, 
    nikeles, 
    page 
    }); 
    return composedStore(createStore)(combinedReducers, railsProps); 
}; 

export default store; 

Answer 1

Am Ende habe ich es gelöst macht die div meiner LogoPage die gesamte Seite überlappen.

so, wenn es angezeigt wird, sehe ich den Hintergrund, wie ich es will, und wenn es abgehängt wird verschwindet das ganze leicht, ich mag diese Lösung, wie es rein CSS ist.

Hier ist meine SCSS Klasse für sich:

.logo-page { 
    opacity:0.8; 
    background-color:$my-red; 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
    z-index:1000; 
}