安裝環境

創建模板 React + Redux Toolkit

1	npx create-react-app my-app --template redux

安裝 react-redux、@reduxjs/toolkit

// npm
npm i react-redux @reduxjs/toolkit

// yarn
yarn add react-redux @reduxjs/toolkit

可依自己的需求安裝環境

認識變數

使用 Redux Toolkit，你會聽到幾個關鍵字：

store：用來存放資料狀態
reducer：用來放改變 state 狀態的方法
action：reducer 要修改 state 的話，需要傳入 action ，去判斷要啟動哪個 reducer，藉由 dispatch 呼叫方法
Provider：在所有組件的最外面包一層 Provider，傳入 store，所有被包覆的組件都可以使用到 store 的狀態。
slice：存放 state、reducer、action 的檔案

Redux 流程

創建 Store
在最外層加入 Provider，並傳入 store，使整個組件都能使用 store 資料
創建 Slice，設定 state、reducer、action
畫面渲染，取得 state、dispatch 方法改變狀態

範例：todoList

製作一個 todoList 列表，輸入框輸入文字，點擊按鈕後新增行程

創建 store

store/index.js

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./slice/todo";

export default configureStore({
  reducer: {
    todo: todoReducer,
  },
});

將 slice 新增在 reducer

configureStore：創建 store 的參數，原生為 creactStore，使用 creactStore 時會有被棄用的警告

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./slice/todo";
import productReducer from "./slice/product";

export default configureStore({
  reducer: {
    todo: todoReducer,
    product: productReducer
  },
});

如有多個檔案，一樣 import 進來，新增在 reducer

在最外層加入 Provider

src/App.js

import { Provider } from "react-redux";
import store from "./store/index";
import Todo from "./Todo";

export default function App() {
  return (
    <Provider store={store}>
      <Todo />
    </Provider>
  );
}

載入 Provider 與 store，Provider 組件傳入 store
包在 Provider 裡的組件都可以使用 store

創建 Slice

store/slice/todo.js

import { createSlice } from "@reduxjs/toolkit";

export const todoSlice = createSlice({
  name: "todo",

  initialState: {
    todolist: [
      { id: 1, name: "起床" },
      { id: 2, name: "刷牙洗臉" },
      { id: 3, name: "吃早餐" },
      { id: 4, name: "上班" }
    ]
  },

  reducers: {
    addTodo: (state, action) => {
      state.todolist.push(action.payload);
    }
  }
});

export const { addTodo } = todoSlice.actions; // 取用方法
export const selectTodo = (state) => state.todo; // 取用資料
export default todoSlice.reducer;

createSlice：創建 slice，把 Redux 原生的 state、reducer、action 都合在一包，稱之為 slice

name：取一個相關的名稱

initialState：所有狀態的初始值

reducers：存放函式，傳入兩個參數，第一個為需要修改的 state，第二個為 action 讓你傳入的參數，用來改變 state

畫面渲染

components/TodoList.js

import { useSelector } from "react-redux";
import { selectTodo } from "../store/slice/todo";

const TodoList = () => {
  const states = useSelector(selectTodo);

  return (
    <ul>
      {states.todolist.map((i) => (
        <li key={i.id}>{i.name}</li>
      ))}
    </ul>
  );
};

export default TodoList;

將預設行程渲染出來

useSelector：拿取 store 的 state，傳入在 slice 建立的 selectTodo

src/Todo.js

import { useDispatch } from "react-redux";
import TodoList from "./components/TodoList";
import { addTodo } from "./store/slice/todo";
import { useState } from "react";

export default function Todo() {
  const [text, setText] = useState("");

  const changeText = (e) => {
    setText(e.target.value);
  };

  const dispatch = useDispatch();

  const handleAddTodo = () => {
    dispatch(addTodo({ id: new Date().getTime(), name: text }));
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={changeText}
      />

      <TodoList />

      <button onClick={handleAddTodo}>
        新增行程
      </button>
    </div>
  );
}

建立輸入框，按鈕新增行程，將 id、輸入文字傳入 addTodo

useDispatch：需藉由 useDispatch 使用 store 裡的 actions，傳入在 slice 建立的 addTodo()

結語

Redux Toolkit 真的比 Redux 好懂很多，真是感謝 Redux Toolkit 的出現！
如果專案滿大的話，滿推薦使用 Redux Toolkit 來管理狀態資料，
學會了基本的 store 使用，明天繼續來講怎麼用 Redux Toolkit 操作非同步吧！

本文為 IT 鐵人賽系列文你 React 了嗎? 30 天解鎖 React 技能

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

【DAY 27】Redux Toolkit 管理組件的共用資料