react - redux - thunk改變頁面的簡潔方式

我試圖讓我的頁面改變背景顏色，以便初始化頁面有不同的背景。react - redux - thunk改變頁面的簡潔方式

我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回購中。

但如果我把document.body.className = ..直接在回調：

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

我得到一個錯誤，說

操作必須是純對象。使用自定義中間件進行異步操作

什麼是更直接的方法來完成此操作？

編輯：

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

來源

2017-10-18 don giulio

你需要終極版，thunk的返回等動作功能。您是否在商店中使用過'applyMiddleware'，如[文檔]（https://www.npmjs.com/package/redux-thunk#installation）中所述 – Bettorun

是的，請檢查問題的'編輯'。 –

任何機會，你使用react-router嗎？如果是這樣，我可以推薦一個替代路徑，可能會更容易 – corvid

在我解決它使我LogoPage的DIV重疊整個頁面結束。

因此，當它顯示出我看到的背景是我想要的，當它被卸載時，整個事情很容易消失，我喜歡這個解決方案，因爲它純粹是CSS。

這裏是我的SCSS類是：

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

來源

2017-10-19 10:43:53

react - redux - thunk改變頁面的簡潔方式

回答

相關問題