Reactクラスコンポーネントでreduxの情報を表示させる方法

Question

長いですが、ご助力いただけたら幸いです。

やりたいこと

• HeaderコンポーネントにページＩＤ（タイトル）を表示させたい。ページ遷移したときに、ページＩＤのstateを変更するactionを発行して、ページＩＤが切り替わるようにしたいが、そもそも、initialStateを表示させることが出来ないので、これを表示できるようにしたい。

備考

• redux-loggerのstate情報では、ページIDのstateは任意の値で管理出来ていて、これをpropsにmapするあたりの書き方がよく分かっていないのが原因だと思っています。

render() 内の page は undefined になってしまいます。

• ややこしいですが、redux 以外に Headerコンポーネントだけで完結するstateを持っています。

Header.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Header extends React.Component {

  state = { hoge: 'fuga',};
	
  render ( ) {
    const { page } = this.props;
    return ( <div>{ page }</div> );
  }
}

const mapStateToProps = main => ( { page: main.value, } );
export default connect( mapStateToProps, null )( Header );

store/index.js

import {
  createStore as reduxCreateStore,
  combineReducers,
  applyMiddleware,
} from 'redux';
import {
  routerReducer,
  routerMiddleware,
} from 'react-router-redux';
import logger from 'redux-logger';

import reducers from '../reducers/';

export default function createStore( history ) {
  return reduxCreateStore(
    combineReducers({
      main: reducers,
      router: routerReducer,
    }),
    applyMiddleware(
	  routerMiddleware( history ),
      logger,
	)
  );
}

action/index.js

const initialState = { value : 'HOME', }

export default ( state = initialState, action ) => {
  switch ( action.type ) {
    default:
      return state;
  }
}

reducer/index.js

import { combineReducers } from 'redux';
import page from './page';

export default combineReducers({ page, });

Answer 1

action/index.jsの中身が、reducer/page.jsに見えますが、どうでしょう？

mapStateToPropsは、引数に、redux全体のStoreが渡されますので、
combineした時のツリー構造で、名前を辿らないと、実際のvalueにたどり着かないと思います。
(ネストしてcombineできるんですね、知らなかった・・・)

const mapStateToProps = {main} => ( { page: main.page.value, } );

Comments

[Hayashi_Jelly]

おっしゃる通りに修正して、色々いじっていたら動きました。ありがとうございます