Redux (3) Action 更新狀態

新增 reducer

sliceTodos 內新增 reducer，狀態管理器物件，物件內有各種方法來更新 state。

• state: initialState 內的值
• action: 傳入的參數會放在 action.payload

// sliceTodos.js
import { createSlice } from "@reduxjs/toolkit";

export const todoSlice = createSlice({
  name: "todos",
  initialState: [
    {
      id: 1,
      text: "這是一段話(副本) Slice",
    },
  ],
  reducers: {
    // 狀態管理器
    createTodo(state, action) {
      state.push(action.payload);
    },
  },
});

// 定義的狀態管理器，可以使用 Actions 來匯出
export const { createTodo } = todoSlice.actions;
export default todoSlice.reducer;

state 無法被賦值

reducers: {
  removeTodo(state, action) {
    const newTodos = state.filter((todo) => todo.id !== action.payload);
    state = newTodos;
  },
},

上面寫法是錯誤的 因為 state 無法直接被賦值

要賦值的話要用 return 寫法

reducers: {
  removeTodo(state, action) {
    const newTodos = state.filter((todo) => todo.id !== action.payload);
    return newTodos;
  },
},

從 store 匯出

從 store.js 匯出 todoReducer

// store.js
import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./slice/todosSlice";

export const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

元件內使用方法

在元件內將 createTodo 方法引入，並在 dispatch 內帶入 createTodo，來更新 todoSlice 的狀態。

import { useSelector, useDispatch } from "react-redux";
import { createTodo } from "./slice/todosSlice";

const initState = {
  id: "",
  text: "",
};

function TodoList() {
  const todos = useSelector((state) => {
    return state.todos;
  });
  const [newTodoText, setNewTodoText] = useState("");
  const [editState, setEditState] = useState(initState);
  const dispatch = useDispatch();

  function addTodo() {
    dispatch(
      createTodo({
        id: todos.length + 1,
        text: newTodoText,
      })
    );
    setNewTodoText("");
  }
}

非同步方法撰寫

slice 中的 reducers 無法處理非同步邏輯，如果需要處理非同步邏輯，可以使用 createAsyncThunk。

• 引入 createAsyncThunk 方法:

// messageSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

• 建立 reducer，用來將狀態寫入 state (只能處理同步邏輯)。

// cartSlice.js
export const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    carts: [],
  },
  reducers: {
    setCarts(state, action) {
      state.carts = action.payload;
    },
  },
});

• 用 createAsyncThunk 建立非同步函式，並 export 出去給其他元件使用。
  createAsyncThunk 會帶入兩個參數
  • Thunk 名稱
  • 非同步函式

// cartSlice.js
// 取得購物車資料
export const getCartList = createAsyncThunk(
  'cart/getCartList',
  async (payload, { dispatch }) => {
    try {
      const res = await axios.get(`/carts`);
      dispatch(setCarts(res.data));
    } catch (error) {
      console.log(error);
    }
  },
);

export const { setCarts } = cartSlice.actions;
export default cartSlice.reducer;

• 在其他元件中使用 createAsyncMessage 方法

// Cart.jsx
import { useSelector, useDispatch } from 'react-redux';
import { getCartList } from '../../slice/cartSlice';

export default function CartPage() {
  const carts = useSelector((state) => state.cart.carts); // 購物車資料
  const dispatch = useDispatch();

  // 頁面載入時取得購物車資料
  useEffect(() => {
    dispatch(getCartList());
  }, [])
}

loading 狀態處理

想在打api時處理 loading 狀態的話可以在 slice 增加 status 狀態，並在 extraReducers 裡用 isAnyOf 監聽所有非同步函式的狀態，當狀態為 pending 時將 status 設為 ‘loading’，狀態為 fulfilled 在設為 ‘success’。

export const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    carts: [],
    status: 'idle',
  },
  reducers: {
    setCarts(state, action) {
      state.carts = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      isAnyOf(
        getCartList.pending,
      ),
      (state) => {
        state.status = 'loading';
      },
    );
    builder.addMatcher(
      isAnyOf(
        getCartList.fulfilled,
      ),
      (state) => {
        state.status = 'success';
      },
    );
  },
});