Redux stateに複数値を持たせる際の方法について

Question

Reduxでstateに複数値を持たせて正常に挙動させたい

状態管理の勉強でReduxの導入を試みているのですが、エラーが発生しているため
ご教授いただければ幸いです。

※React * TypeScriptでコーディングしております。

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

reducerを作成しており、stateに複数値を設定。
actionによって、state内の指定されたものだけを加算したいのですが、
指定時にエラーとなります。

この呼び出しに一致するオーバーロードはありません。
  2 中 1 のオーバーロード, '(reducer: Reducer<{ walkX: number; walkY: number; }, { type: any; }>, enhancer?: StoreEnhancer<unknown, unknown> | undefined): Store<{ walkX: number; walkY: number; }, { type: any; }>' により、次のエラーが発生しました。
    型 '(state: { walkX: number; walkY: number; } | undefined, action: { type: any; }) => number | { walkX: number; walkY: number; }' の引数を型 'Reducer<{ walkX: number; walkY: number; }, { type: any; }>' のパラメーターに割り当てることはできません。
      型 'number | { walkX: number; walkY: number; }' を型 '{ walkX: number; walkY: number; }' に割り当てることはできません。型 'number' を型 '{ walkX: number; walkY: number; }' に割り当てることはできません。

2 中 2 のオーバーロード, '(reducer: Reducer<{ walkX: number; walkY: number; }, { type: any; }>, preloadedState?: { walkX: number; walkY: number; } | undefined, enhancer?: StoreEnhancer<unknown, {}> | undefined): Store<...>' により、次のエラーが発生しました。
    型 '(state: { walkX: number; walkY: number; } | undefined, action: { type: any; }) => number | { walkX: number; walkY: number; }' の引数を型 'Reducer<{ walkX: number; walkY: number; }, { type: any; }>' のパラメーターに割り当てることはできません。


    10 | // ReducerをStateに登録
  > 11 | const store = createStore(reducer);
       |                           ^
    12 | 
    13 | // console.log(store);
    14 | console.log(store.getState);

ソースコード

# index.tsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./redux/reducer/reducer";

//エラー箇所
const store = createStore(reducer);


ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById("root")
);

#reducer.ts
export interface initialState {
 walkX: number;
 walkY: number;
}
 

//actionによって「walkX」or 「walkY」の値を増減させたいです
const initialState = {
  walkX: 0,
  walkY: 0,
};

const reducer = (
  state = initialState,
  action: { type: any;
) => {
  switch (action.type) {
   case "WALKFRONT":
      //下記を「return state;」にするとエラーは発生しない
      //「state.walkX +1」とすることでindex.tsxのreducerがエラーとなる
      return state.walkX + 1;
    default:
      return state;
  }
};
export default reducer;

Answer 1

reducerの中で、 state.walkX + 1 をreturnしていますが、これだとinitialStateと型が一致しません。

walkXを更新したいのであれば、

{
  ...state,
  walkX: state.walkX + 1
}

をreturnする必要があります。

Comments

[front]

ご指摘をもとに解決することができました。
ありがとうございました