🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2520閲覧

Redux ToolkitのCreateSliceを分割して使いたい

t_tab

総合スコア3

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/24 04:41

Redux ToolkitのCreateSliceを分割して使いたい

Redux ToolkitのCreateSliceの中身を分割して別のSliceを作成し
共有しようと思っているのですがうまくいきません

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

複数のReducerが作成されてstateの共有がされていません

該当のソースコード

practice1slice.ts

TypeScript

1import { createSlice, PayloadAction } from "@reduxjs/toolkit"; 2 3interface PracticeProps { 4 Id: string, 5 Name: string, 6 Age: number 7} 8 9const getUniqueId = () => { 10 var strong = 1000; 11 return new Date().getTime().toString(16) + Math.floor(strong*Math.random()).toString(16) 12}; 13 14const initialState:PracticeProps[] = []; 15const practice1Slice = createSlice({ 16 name: 'Practice', 17 initialState, 18 reducers: { 19 add: (state, action: PayloadAction<PracticeProps>) => { 20 console.table(state); 21 console.table(action.payload); 22 const newProp: PracticeProps = { 23 Id: getUniqueId(), 24 Name: action.payload.Name, 25 Age: action.payload.Age 26 }; 27 return [...state, newProp]; 28 } 29 } 30}); 31export default practice1Slice.reducer; 32export const { add } = practice1Slice.actions;

practice2slice.ts

TypeScript

1import { createSlice } from "@reduxjs/toolkit"; 2import { PracticeProps } from "./practice1Slice"; 3const initialState:PracticeProps[] = []; 4const practice2Slice = createSlice({ 5 name: 'Practice', 6 initialState, 7 reducers: { 8 remove: (state, action: PayloadAction<string>) => { 9 return state.filter(el=> el.Id === action.payload); 10 } 11 } 12}); 13export default practice2Slice.reducer; 14export const { remove } = practice2Slice.actions;

practice.tsx

TypeScript

1import React, { FC, useState } from 'react'; 2import { useDispatch, useSelector } from 'react-redux'; 3import { add } from '../../stores/slices/practice1Slice'; 4import { remove } from '../../stores/slices/practice2Slice'; 5const Practice : FC = () => { 6 const state = useSelector((state:any) => state.practice1Slice); 7 const [Name, setName] = useState(''); 8 const [Age, setAge] = useState(0); 9 const dispatch = useDispatch(); 10 return( 11 <> 12 <button onClick={()=>dispatch(add({Id:'', Name, Age}))}>作成</button> 13 <div>Name: <input type='text' value={Name} onChange={e=>setName(e.currentTarget.value)}/></div> 14 <div>Age: <input type='number' value={Age} onChange={e=>setAge(parseInt(e.currentTarget.value))}/></div> 15 <ul> 16 {state.map((prop:any)=> 17 <li> 18 <div> 19 {prop.Id} : {prop.Name} : {prop.Age} : <button onClick={()=>remove(prop.Id)}>削除</button> 20 </div> 21 </li>)} 22 </ul> 23 </> 24 ) 25} 26export default Practice;

store.ts

TypeScript

1import { combineReducers, configureStore } from "@reduxjs/toolkit"; 2import practice1Slice from './slices/practice1Slice'; 3import practice2Slice from './slices/practice2Slice'; 4 5const store = configureStore({ 6 reducer: combineReducers({ 7 practice1Slice, 8 practice2Slice, 9 }) 10}); 11export default store;

試したこと

CreateSliceのnameの部分を同じにしてコーディングをしてみましたがうまくいきませんでした

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

create-react-app my-app --template redux-typescriptで生成されるコードを参考にしています。
なぜsliceを分割をしたいかというと、1つのsliceで作成した場合reducersの中身がかなり多量になることが予測されるためファイルを分割しておきたいからです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/03/24 04:47

たぶん一つの slice を複数の createSlice に分けて書くことは想定されてないと思いますが、add や remove などの関数を別々のファイルに書いて、まとめて createSlice するのでは駄目ですか?
t_tab

2021/03/24 05:00

別々の関数に分けるという発想がありませんでした。わけて作ってみます
guest

回答1

0

ベストアンサー

reducersの量が多くなるのなら、createSliceごと分割するというより、reducersを分割するアプローチの方が適しているのではないでしょうか?

具体的には、reducersディレクトリを作って、ソース中にあるremoveaddをファイルごとに切り分けてcreateSliceするファイルではそれらをimportして使う形です。

投稿2021/03/24 04:47

nekoniki

総合スコア2411

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

t_tab

2021/03/24 05:00

reducersを別に作ることができるのですね createSliceしかReduxを使用する方法を知らなかったので…… そのアプローチを試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問