react - redux - thunk 以简洁的方式改变页面的背景

Question

我正在尝试让我的页面更改背景颜色，以便初始化页面具有不同的背景。

我的 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;

当应用试图获取由 landingPage 组件调用的用户 gps 位置时显示：

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

背景动作：

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 操作，这对我来说似乎是在我更改背景颜色时进行调度的完全矫枉过正，但我没有需要将背景 class 存储在 redux 存储库中。

但是如果我将 document.body.className = .. 直接放在回调中：

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

我收到一条错误消息说

Actions must be plain objects. Use custom middleware for async actions

完成此任务的更直接方法是什么？

编辑：

我的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

最后我解决了这个问题，使我的 LogoPage 的 div 覆盖了整个页面。

所以当它显示时我可以看到我想要的背景，当它被卸载时整个东西很容易消失，我喜欢这个解决方案，因为它纯粹是 CSS。

这是我的 scss class：

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

react - redux - thunk 以简洁的方式改变页面的背景

react - redux - thunk changing background of the page the concise way

javascript

reactjs

redux

redux-thunk