安裝環境

創建模板 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 技能

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

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

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

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