前提・実現したいこと
Reduxのmodeの状態によってstyled-componentsのcssを変えたい
発生している問題・エラーメッセージ
propsやlogger上のmodeの値がどう変化しても、cssはtrueの時の値が入っている
該当のソースコード
Appjs
1class App extends React.Component { 2 3 render(){ 4 return ( 5 <div className='App'> 6 <Header /> 7 <Switch> 8 <Route exact path='/' component={Home} /> 9 <Route path='/about' component={About} /> 10 <Route path='/skills' component={Skills} /> 11 <Route path='/products' component={Products} /> 12 <Route path='/contact' component={Contact} /> 13 </Switch> 14 <button 15 type='button' 16 onClick={() => this.props.changeDay()} 17 >click me</button> 18 <button 19 type='button' 20 onClick={() => this.props.changeNight()} 21 >click here</button> 22 <Footer /> 23 </div> 24 ); 25 } 26 } 27 28 29 30const mapStateToProps = state => { 31 return { 32 mode: state.mode.mode 33 }; 34}; 35 36const mapDispatchToProps = dispatch => ({ 37 changeDay: () => { dispatch(changeDay()) }, 38 changeNight: () => { dispatch(changeNight()) }, 39}); 40 41export default 42connect( 43 mapStateToProps, 44 mapDispatchToProps 45) 46(App);
rootReducer
1import { combineReducers } from 'redux'; 2import mode from './mode.reducer'; 3 4const rootReducer = combineReducers({mode}); 5 6export default rootReducer;
modeReducer
1import { DAY, NIGHT } from './mode.actions'; 2 3const initialState = { 4 mode: '' 5} 6 7const modeReducer = (state = initialState, action) => { 8 switch (action.type) { 9 case DAY: 10 return { mode: DAY }; 11 case NIGHT: 12 return { mode: NIGHT }; 13 default: 14 return state; 15 } 16}; 17 18export default modeReducer;
modeAction
1export const DAY = 'DAY'; 2export const NIGHT = 'NIGHT'; 3 4export const changeDay = () => { 5 return { 6 type: DAY, 7 payload: { mode: DAY } 8 }; 9}; 10 11export const changeNight = () => { 12 return { 13 type: NIGHT, 14 payload: { mode: NIGHT } 15 }; 16};
store
1import { createStore, applyMiddleware } from 'redux'; 2import rootReducer from './root-reducer'; 3import logger from 'redux-logger'; 4 5const middlewares = [logger]; 6 7export const store = createStore(rootReducer, applyMiddleware(...middlewares)); 8 9export default { store };
stylejsx
1export const BgColor = css` 2 background-color: ${props => props.mode = 'DAY' ? 'white' : 'black' }; 3`; 4 5export const Color = css` 6 color: ${props => props.mode = 'DAY' ? 'green' : 'yellow'}; 7`;
試したこと
componentDidUpdateを使用してレンダリングされてることは確認しました。
ボタンを押した際にpropsのmodeやloggerのstateで意図した値に変更されていることは確認しました。
initialStateの値を空にしていますが、初回レンダリング時にtrueのcssが反映されています。
補足情報(FW/ツールのバージョンなど)
React+Reduxで作成しています。
style.jsxで共通のcssを決めて各styled-componentに渡しています。
このような場で質問するのは初めてですが、足りない情報等あれば教えてください。
よろしくお願い致します。
![guest](/img/icon/icnUserSample.jpg)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/15 03:19
2020/03/15 03:39
2020/03/15 04:52