Redux ToolkitのSlicesとcreateSlice
createSliceでreducerロジックを作成し、actionsを定義してRedux storeに接続します。
「Redux ToolkitのSlicesとcreateSlice」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
Redux Toolkitとは
インストール
npm install @reduxjs/toolkit react-reduxcreateSlice
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1; },
decrement: state => { state.value -= 1; },
incrementBy: (state, action) => { state.value += action.payload; },
},
});
export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;Immerの内部動作
ストアの設定
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
},
});ストアの提供
import { Provider } from 'react-redux';
import { store } from './store';
createRoot(document.getElementById('root')).render(
<Provider store={store}><App /></Provider>
);useSelectorとuseDispatch
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const value = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<>
<p>{value}</p>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(incrementBy(5))}>+5</button>
</>
);
}TypeScriptの型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);追加のリデューサー
extraReducers: (builder) => {
builder.addCase(fetchUser.fulfilled, (state, action) => {
state.user = action.payload;
});
}理解度チェック
まとめ
次のレッスン
よくある質問
「Redux ToolkitのSlicesとcreateSlice」レッスンは無料ですか？
はい。「Redux ToolkitのSlicesとcreateSlice」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Redux ToolkitのSlicesとcreateSlice」で何を学びますか？
createSliceでreducerロジックを作成し、actionsを定義してRedux storeに接続します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Redux ToolkitのSlicesとcreateSlice」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Redux ToolkitのSlicesとcreateSlice
- createAsyncThunkによる非同期ロジック
- RTK Query：Endpointsと自動キャッシュ
- Optimistic Updatesとキャッシュ無効化