---
# System prepended metadata

title: Redux toolkitとは

---

# Redux toolkitとは
Reduxを簡易的に実装する
TypescriptでReduxを書く場合は専用のテンプレートが存在するのでそれを使うと良い。

```terminal
npx create-react-app my-app --template redux-typescript
```
## イメージ
![](https://i.imgur.com/eMkce2M.png)




## slice
- createSlice関数を使うことで実装可能。
- sliceは小さいstoreとしてみる。

``` react
//インポート
import { createSlice } from '@reduxjs/toolkit';
```
- reducerの挙動はほぼ同じ。
- actionとreducerを同時に設定できる。

### 書き方

```react
// createSlice実装
export const taskSlice = createSlice({
  //slice内で使うstateの識別名設定。
  name: 'task',
  //stateをセット。
  initialState, 
  //reducerを設定。
  reducers: {　
    // actionの作成。
    createTask: (state, action) => {
      state.idCount++;
      // stateの生成
      const newTask = {
        id: state.idCount,
        title: action.payload,
        completed: false,
      };
      // stateを追加
      state.tasks = [newTask, ...state.tasks];
    }
  }
```
## configureStore関数

```react
//モジュールインポート
import { configureStore, Action } from '@reduxjs/toolkit';
```
- storeの管理をする。
- sliceを纏めて一つのstoreにする。

### 書き方
インポートして各sliceを読み込んだ後にstoreをexportする。

```react:import
import counterReducer from '../features/counter/counterSlice';
import taskReducer from '../features/task/taskSlice';
```
```react:export
export const store = configureStore({
  reducer: {
    counter: counterReducer,
    task: taskReducer,
  },
});
```

## useSelector
```react:slice側
//selector用定数エクスポート
export const selectTasks = (state) => state.task.tasks;
```
```react:component側
//モジュールインポート
import { useSelector } from 'react-redux';
//定数インポート
import { selectTasks } from '../taskSlice';
```
- stateをコンポーネントから直接覗けるようになる。

### 書き方

```react:component側
const TaskList = () => {
  //state取得
  const tasks = useSelector(selectTasks);
  return (
    <div className={styles.root}>
      {tasks.map((task) => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
```

## useDispatch
 
```react:slice側
//actionをエクスポート
export const {
  createTask,
  editTask,
  selectTask,
  handleModalOpen,
} = taskSlice.actions;
```
```react:component側
//モジュールインポート
import { useDispatch } from 'react-redux';
//actionインポート
import {
  createTask,
  editTask,
  handleModalOpen,
  selectSelectedTask,
} from '../taskSlice';
```
- ReduxとReactを繋げる役割。
- actionの発火が可能。

### 書き方

```react:component側
const dispatch = useDispatch();
//actionの発火
dispatch(createTask(data.taskTitle));
```
