Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]

1
import { combineReducers } from '@reduxjs/toolkit'
2

3
const rootReducer = combineReducers({})
4

5
export type RootState = ReturnType<typeof rootReducer>
6

7
export default rootReducer

1
import { configureStore } from '@reduxjs/toolkit'
2
import rootReducer from './rootReducer'
3

4
const store = configureStore({
5
  reducer: rootReducer
6
})
7

8
export type AppDispatch = typeof store.dispatch
9

10
export default store

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import './index.css';
4
import App from './App';
5
import * as serviceWorker from './serviceWorker';
6
import { Provider } from 'react-redux'
7
import store from './store'
8

9
ReactDOM.render(
10
  <Provider store={store}>
11
    <App />
12
  </Provider>,
13
  document.getElementById('root')
14
)

1
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
2
import { Task } from '../Types'
3

4
type State = {
5
  count: number
6
  tasks: Task[]
7
}
8

9
const initialState: State = {
10
  count: 2,
11
  tasks: [
12
    {
13
      id: 2,
14
      title: '次のTodo',
15
      done: false
16
    },{
17
      id: 1,
18
      title: '最初のTodo',
19
      done: true
20
    }
21
  ]
22
}
23

24
const tasksModule = createSlice({
25
  name: 'tasks',
26
  initialState,
27
  reducers: {
28
    addTask (state: State, action: PayloadAction<string>) {
29
      state.count++
30

31
      const newTask: Task = {
32
        id: state.count,
33
        title: action.payload,
34
        done: false
35
      }
36

37
      state.tasks = [newTask, ...state.tasks]
38
    },
39
    doneTask (state: State, action: PayloadAction<Task>) {
40
      const task = state.tasks.find(t => t.id === action.payload.id)
41
      if (task) {
42
        task.done = !task.done
43
      }
44
    },
45
    deleteTask (state: State, action: PayloadAction<Task>) {
46
      state.tasks = state.tasks.filter(t =>
47
        t.id !== action.payload.id
48
      )
49
    }
50
  }
51
})
52

53
export const {
54
  addTask, doneTask, deleteTask
55
} = tasksModule.actions
56

57
export default tasksModule

1
import tasksModule from './modules/tasksModule'
2

3
const rootReducer = combineReducers({
4
    tasks: tasksModule.reducer
5
})

1
import React from 'react'
2
import TaskItem from './TaskItem'
3
import { useSelector } from 'react-redux'
4
import { RootState } from '../rootReducer'
5

6
const TaskList: React.FC = () => {
7
  const { tasks } = useSelector((state: RootState) => state.tasks)
8

9
  return (
10
    <div className="inner">
11
      {
12
        tasks.length <= 0 ? '登録されたTODOはありません。' :
13
        <ul className="task-list">
14
                { tasks.map(task => (
15
                        <TaskItem key={task.id} task={task} />
16
                )) }
17
                </ul>
18
      }
19
    </div>
20
  )
21
}
22

23
export default TaskList

1
import React, { useState } from 'react'
2
import { useDispatch } from 'react-redux'
3
import { addTask } from '../modules/tasksModule'
4

5
const TaskInput: React.FC = () => {
6
  const dispatch = useDispatch()
7

8
  const [ inputTitle, setInputTitle ] = useState('')
9

10
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
11
    setInputTitle(e.target.value)
12
  }
13

14
  const handleSubmit = () => {
15
    dispatch(addTask(inputTitle))
16
    setInputTitle('')
17
  }
18

19
  return (
20
    <div className="input-form">
21
      <div className="inner">
22
        <input
23
          type="text"
24
          className="input"
25
          value={inputTitle}
26
          onChange={handleInputChange}
27
          placeholder="TODOを入力してください。"
28
        />
29
        <button onClick={handleSubmit} className="btn is-primary">追加</button>
30
      </div>
31
    </div>
32
  )
33
}
34

35
export default TaskInput

1
import React from 'react'
2
import { Task } from '../Types'
3
import { useDispatch } from 'react-redux'
4
import { doneTask, deleteTask } from '../modules/tasksModule'
5

6
type Props = {
7
  task: Task
8
}
9

10
const TaskItem: React.FC<Props> = ({ task }) => {
11
  const dispatch = useDispatch()
12

13
  return (
14
    <li className={task.done ? 'done' : ''}>
15
      <label>
16
        <input
17
          type="checkbox"
18
          className="checkbox-input"
19
          onClick={() => dispatch(doneTask(task))}
20
          defaultChecked={ task.done }
21
        />
22
        <span className="checkbox-label">{ task.title }</span>
23
      </label>
24
      <button
25
        onClick={() => dispatch(deleteTask(task))}
26
        className="btn is-delete"
27
      >削除</button>
28
    </li>
29
  )
30
}
31

32
export default TaskItem

1
import React from 'react'
2
import TaskList from './components/TaskList'
3
import TaskInput from './components/TaskInput'
4
import './App.css'
5

6
const App: React.FC = () => {
7
  return (
8
    <div>
9
      <TaskInput />
10
      <TaskList />
11
    </div>
12
  )
13
}
14

15
export default App