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の中身がかなり多量になることが予測されるためファイルを分割しておきたいからです。
回答1件
あなたの回答
tips
プレビュー