connected-react-router ページ遷移前後でstateを同期したい

前提・実現したいこと

react + redux + connected-react-routerを用いて、
画面1でstoreの状態を更新 → 画面2に遷移してstoreの状態を表示する、
というアプリケーションを作成しています。

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

画面1でstoreの状態を更新しても、画面2に遷移した際に初期化されてしまう。

該当のソースコード

actioncreator.js

export function samplefunc1() {
  return {
    type: 'sample1',
    content: 'func1 text',
    custom: false,
  }
}

export function samplefunc2(text) {
  return {
    type: 'sample2',
    content: text,
    custom: true,
  }
}

reducers.js

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  app_main: reduxsampleApp,
});

const initialState = {
  content: 'default',
  custom: false,
};

function reduxsampleApp(state = null, action) {
  switch (action.type) {
    case 'sample1':
      return Object.assign({}, state, {
        content: action.content,
        custom: action.custom,
      })
    case 'sample2':
      return Object.assign({}, state, {
        content: action.content,
        custom: action.custom,
      })
    default:
      return initialState
  }
}

export default createRootReducer;

configureStore.js

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import createRootReducer from './reducers';

export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history),
    preloadedState,
    compose(
      applyMiddleware(
        routerMiddleware(history),
      ),
    ),
  );

  return store;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import SamplePage1 from './SamplePage1';
import SamplePage2 from './SamplePage2';
import configureStore, { history } from './configureStore';
import propTypes from 'prop-types';

const store = configureStore();

class Index extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <Route exact path="/" component={SamplePage1} />
                        <Route exact path="/page2" component={SamplePage2} />
                    </Switch>
                </ConnectedRouter>
            </Provider>
        )
    }
}

Index.propTypes = {
    history: propTypes.object,
}

ReactDOM.render(
    <Index />,
    document.getElementById("index")
);

SamplePage1.js

import React from 'react';
import Button from '@material-ui/core/Button';
import propTypes from 'prop-types';
import { connect } from 'react-redux';
import { samplefunc1, samplefunc2 } from './actioncreator';
import { push } from 'connected-react-router';

const text = "func2 text";
function SamplePage1(props) {
  return (
    <div>
      <Button onClick={props.func1}>
        func1.
      </Button>
      <Button onClick={() => props.func2(text)}>
        func2.
      </Button>
      <Button onClick={() => props.nextpage("./page2")}>
        move to page2.
      </Button>
      <br />
      Content: {props.content} <br />
      Custom: {(props.custom) ? "true" : "false"}
    </div>
  );
}

SamplePage1.propTypes = {
  content: propTypes.string,
  custom: propTypes.bool,
  func1: propTypes.func.isRequired,
  func2: propTypes.func.isRequired,
}

const mapStateToProps = state => ({
  content: state.app_main.content,
  custom: state.app_main.custom,
})

const mapDispatchToProps = dispatch => ({
  func1: () => dispatch(samplefunc1()),
  func2: (text) => dispatch(samplefunc2(text)),
  nextpage: (path) => dispatch(push(path)),
})

export default connect(mapStateToProps, mapDispatchToProps)(SamplePage1);

SamplePage2.js

import React from 'react';
import Button from '@material-ui/core/Button';
import { connect } from 'react-redux';

function SamplePage2(props) {
  return (
    <div>
      <Button href="./">
        back to page1.
      </Button><br />
      Content: {props.content}<br />
      Custom: {(props.custom) ? "true" : "false"}
    </div>
  );
}

const mapStateToProps = state => ({
  content: state.app_main.content,
  custom: state.app_main.custom,
})

export default connect(mapStateToProps)(SamplePage2);

試したこと

SamplePage1.js

遷移方法を以下の3種類で試した→いずれもNG

<Button>
  <Link to="./page2">
    move to page2.
  </Link>
</Button>

<Button href="./page2>
  move to page2.
</Button>

<Button onClick={() => props.nextpage("./page2", props)>

~~~ 略 ~~~

nextpage: (path, props) => dispatch(push(path, {content: props.content, custom: props.custom}))

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

react v17.0.1
react-redux v7.2.6
connected-react-router v6.9.2

行動規範の内容に同意します

回答1件

ベストアンサー

reducers.js

Redux の reducer (reduxsampleApp) は、
・state が null の場合は initialState にする (state 引数のデフォルト値を initialState にする)
・知らないアクションが来た場合は state をそのまま返す
必要があったような…。

diff
1-function reduxsampleApp(state = null, action) {
2+function reduxsampleApp(state = initialState, action) {
3   switch (action.type) {
4     // 略
5     default:
6-      return initialState
7+      return state
8   }
9 }

SamplePage2.js

SPA の場合、href は使っちゃいけないはずなので、戻るのはたぶん push('/') か goBack() するのでは。
(push は普通に / に飛ぶリンクを踏んだ時と同じ挙動で、goBack はブラウザの戻るボタンと同様だと思われます。)

投稿2021/12/17 12:20

hoshi-takanori

総合スコア7901

marusa

2021/12/17 12:39

ご回答ありがとうございます。 reduxsampleAppを頂いた回答の通りに変更したら動作しました。遷移時に更新したstateで呼び出されていたけれど、defaultのreturnが常にinitialStateだったのが問題でした。考えてみれば当たり前ですね。。ありがとうございます。 Page2についても回答の通りです。

行動規範の内容に同意します