質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

React+Reduxでstyled-componentのCSSが正常に反映されない

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 653

ichi_13119

score 4

前提・実現したいこと

Reduxのmodeの状態によってstyled-componentsのcssを変えたい

発生している問題・エラーメッセージ

propsやlogger上のmodeの値がどう変化しても、cssはtrueの時の値が入っている

該当のソースコード

class App extends React.Component {

    render(){
      return (
        <div className='App'>
          <Header />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/skills' component={Skills} />
            <Route path='/products' component={Products} />
            <Route path='/contact' component={Contact} />
          </Switch>
          <button 
          type='button'
          onClick={() => this.props.changeDay()}
          >click me</button>
          <button 
          type='button'
          onClick={() => this.props.changeNight()}
          >click here</button>
          <Footer />
        </div>
        );
      }
    }



const mapStateToProps = state => {
  return {
    mode: state.mode.mode
  };
};

const mapDispatchToProps = dispatch => ({
    changeDay: () => { dispatch(changeDay()) },
    changeNight: () => { dispatch(changeNight()) },
});

export default 
connect(
  mapStateToProps,
  mapDispatchToProps
)
(App);
import { combineReducers } from 'redux';
import mode from './mode.reducer';

const rootReducer = combineReducers({mode});

export default rootReducer;
import { DAY, NIGHT } from './mode.actions';

const initialState = {
  mode: ''
}

const modeReducer = (state = initialState, action) => {
  switch (action.type) {
    case DAY:
      return { mode: DAY };
    case NIGHT:
      return { mode: NIGHT };
    default: 
      return state;
  }
};

export default modeReducer;
export const DAY = 'DAY';
export const NIGHT = 'NIGHT';

export const changeDay = () => {
  return {
    type: DAY,
    payload: { mode: DAY }
  };
};

export const changeNight = () => {
  return {
    type: NIGHT,
    payload: { mode: NIGHT }
  };
};
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './root-reducer';
import logger from 'redux-logger';

const middlewares = [logger];

export const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default { store };
export const BgColor = css`
  background-color: ${props => props.mode = 'DAY' ? 'white' : 'black' };
`;

export const Color = css`
  color: ${props => props.mode = 'DAY' ? 'green' : 'yellow'};
`;

試したこと

componentDidUpdateを使用してレンダリングされてることは確認しました。
ボタンを押した際にpropsのmodeやloggerのstateで意図した値に変更されていることは確認しました。
initialStateの値を空にしていますが、初回レンダリング時にtrueのcssが反映されています。

補足情報(FW/ツールのバージョンなど)

React+Reduxで作成しています。
style.jsxで共通のcssを決めて各styled-componentに渡しています。
このような場で質問するのは初めてですが、足りない情報等あれば教えてください。
よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

ぱっと見でここが原因では?と思える箇所があります。styled component を作るところの三項演算子の条件の部分が

修正前:

props.mode = 'DAY'

となっていますが、上記は常にtruthyなので、三項演算子の結果も常に :の前の値が返されてしまって、意図したようにはならないです。ですので、

修正後:

props.mode == 'DAY'


または

修正後:

props.mode === 'DAY'


としてみるといかがでしょうか?
この修正だけで、全てが意図通りに動くかは分かりませんが、何らか問題解決に進展するのではと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/15 12:19

    ご回答ありがとうございます。
    ===に変更したところ、falseの値が反映されるようになりましたが、modeの値が'DAY'になってもtrueの値にはならない状態になっています。

    キャンセル

  • 2020/03/15 12:39

    コメントありがとうございます。

    > ===に変更したところ、falseの値が反映されるようになりました

    とのことですので、とりあえず前に進んだ感じでしょうか?
    現状について、

    > modeの値が'DAY'になってもtrueの値にはならない状態になっています。

    という次の問題については、コード全体を見ていないのではっきりしたことは言えませんが、おそらく、 BgColorおよびColorを使っている箇所に何か問題があるのでは?と推測しています。

    キャンセル

  • 2020/03/15 13:52

    前に進んだか、と言われると少し怪しいです。
    反映されてるのが、true時の値かfalse時の値かというだけで動きは変わっていないので。。。

    使っている箇所の問題としてはpropsで渡している物が違う説が一番怪しそうかなと思っています

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る