前面我們已經成功實現會員的登入 & 註冊，接下來就是需要在會員登入後將該會員的資料存進 store 。
首先我們會需要建立一個新的 slice ，用於將 store 中的資料進行分開管理，在來這個 slice 中的 initial data 會是以下格式

{
    id: "",
    mail:""
}

這邊我們只需要 user 的 id，用於辨識 todo 的所有者，並且我們的 email 就會是 user 的帳號，這邊先存這兩項資料，再來就是我們需要一個 reducer 用於更新 state ，首先我們要先從傳入的資料中取出我們要用的部分

updateUser: (state, action) => {
    const { id, email } = action.payload;

    return {
        ...state,
        ...(id && { id }),
        ...(email && { email }),
    };
},

這邊可以看到，這邊使用解構賦值的方式從 payload 中取得其中的 id, mail 這兩筆資料，並且透過展開運算符在 return 的時候，回傳一份新的 object，若是有資料包含 id 就更新 id，有 mail 就更新 mail，這樣可以提高 code 的穩定性。

在來就是將這個 slice 添加至 store 中

reducer: {
    todo: todoSlice.reducer,
    user: userSlice.reducer,
},

接下來會透過 customHook 的方式將取用 userSlice 的方式做一個包裝

|- src
|-- hooks
|--- useUser.js

function useUser() {
    const dispatch = useDispatch();
    const user = useSelector(state => state.user);

    const setUser = data => {
        dispatch(updateUser(data));
        // console.log('newData', user);
    };
    return { user, setUser };
}

接下來我們要使用這個 slice 的時候，只需要從 useUser 中取用 user & setUser 這兩個 method 就可以了。

接下來回到登入畫面使用這個 hook
// index.jsx

// set userData
const { setUser } = useUser();

...登入成功後

setUser(data.user);

這樣我們就成功將資料存進 store 了。