Reduxで初期値が取得できない。

Question

前提

数字のカウンターを作成してReduxを学習しています。
下記はサンプルです。

サンプル(CodeSandBox)

サンプルのコードは、下記の動画を参考にして制作しました。
【React Redux】React Redux入門編！20分弱の動画で、React Reduxが学べる！？日本語で詳しく解説！(YouTube)

問題点

countの初期値0を所得出来ず、現状は下図の通り「count: 」と表示されます。

console.log(count)で確認したところ、undefinedでした。

実現したいこと

初期値である0を取得して、「count: 0」と表示させたいです。

使用しているライブラリ

• Redux
• React-Redux

TypeScriptも使用しています。

ソースコード

index.tsx

import * as React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import counter from "./reducers/counter";

import App from "./App";

let store = createStore(counter);

const rootElement = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

App.tsx

import * as React from "react";
import { increment, decrement } from "./actions/counter";
import { useSelector, useDispatch } from "react-redux";

export default function App() {
  const count = useSelector((state: { count: number }) => state.count);
  const dispatch = useDispatch();

  return (
    <>
      <h1>count: {count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </>
  );
}

reducers/counter.ts

const counter = (count = 0, action: { type: string }) => {
  switch (action.type) {
    case "INCREMENT":
      return count + 1;
    case "DECREMENT":
      return count - 1;
    default:
      return count;
  }
};

export default counter;

actions/counter.ts

export const increment = () => {
  return {
    type: "INCREMENT"
  };
};

export const decrement = () => {
  return {
    type: "DECREMENT"
  };
};

現状のコードに対する認識レベルや私なりに推測した原因

• reducer/counter.tsの

const counter = (count = 0, action: { type: string }) => {

count = 0で初期値を設定できている

• countがundefinedになっているので、初期値ではなくcountそのものが取得できていない？
• reducerを見るにactionをdispatchすることでcountが返ってくるので、actionをdispatchするまではcountは存在しない？

試したこと

サンプルを作成するにあたり参考にした動画の通り、combineReducersを経由させることで初期値を取得することができました。

reducers/reducers.ts

import { combineReducers } from "redux";
import counter from "./counter";

const reducers = combineReducers({
  count: counter 
});

export default reducers;

しかし現状reducerは1つなのと、combineReducersを経由させるとなぜ初期値が取得できるか理解できていないので、combineReducersを使用しない場合の実装方法をご教示いただきたいです。

Answer 1

こんにちは

以下のように修正してみると、いかがでしょうか？

- const count = useSelector((state: { count: number }) => state.count);
+ const count = useSelector((count: number) => count);

Answer 2

createStore では最初は reducer を呼び出さずに第二引数で渡されたものを initialState とする（第二引数が省略されたら undefined になる）のに対して、combineReducers は各 reducer を state = undefined で呼び出した結果を intialState にするから、だと思います。

参考: ReduxでReducerとInitialStateを分けるためのbetterCombineReducers - Qiita