が反応 - Reduxのを - 初期設定ページには、異なるバックグラウンドを持つように簡潔な方法

Question

ページの背景を変更するサンク私は、私のページ変更の背景色を持ってしようとしています。

マイLogoPageコンポーネント：

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; 

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); 

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; 

これは、アプリは、ランディングページコンポーネントによって呼び出されるユーザのGPS位置を取得しようとしているときに表示されます

the backgroundActions：

const setBackground = backgroundClass => { 
    return document.body.className = backgroundClass; 
} 

const setRedBackground =() => { 
    return function(dispatch) { 
    dispatch(setBackground("red-background")); 
    }; 
}; 

const setTransparentBackground =() => { 
    return function(dispatch) { 
    dispatch(setBackground(null)); 
    }; 
}; 

export { setRedBackground, setTransparentBackground }; 

これはうまくいきません。私も還元的な行動をしなければならないからです。これは私が背景色を変えたときにディスパッチするために過度に過剰なものに見えます。 reduxリポジトリにバックグラウンドクラスを格納する必要があります。

しかし、私はコールバックで直接document.body.className = ..を置く場合：

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

私は

アクションは、プレーンなオブジェクトでなければならないというエラーを取得します。非同期アクションにカスタムミドルウェアを使用する

これを行うためのより簡単な方法はありますか？

編集：私は私のLogoPageのdiv要素は、ページ全体をオーバーラップ作り、それを解決して終わりで

私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

。

私がそれをしたいと、私は背景を見て、それが全体のことが簡単に消えるアンマウントますとき、それは純粋にCSSであるように、私は、このソリューションが好きで示されたときにように。

ここに私のSCSSクラスはそれのためです：

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