(Redux Toolkit) How to access the state outside of the createSlice - reactjs

Question

In my project, I want to put as much as logic and function inside the the slice.js. Sometime I want to create or export the function outside of the createSlice like this:
const checkValid = () => {
```need to access the current state to check for validation```
}
export const boardSlice = createSlice({
name: 'board',
initialState,
reducers: {
check: (state, actions) => {
checkValid(actions.payload);
}
}
});
The checkValid need to access the state in the store, my current solution is directly passing the state as props along with the actions.payload in the reducer. But is there a better or official way of doing this? Also, is it good to put as much as logic inside the slice? Much appreciated.

Answer 1

Let me share with you what am using, hope it helps
mport { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
import authService from "Services/authService";
import { logOutUser } from "Services/userServices";
const user = JSON.parse(localStorage.getItem("user"));
const initialState = {
user: user ? user : null,
isError: false,
isSuccess: false,
isLoading: false,
message: "",
};
// Register user
export const register = createAsyncThunk("user/register", async (user, thunkAPI) => {
try {
return await authService.register(user);
} catch (error) {
const message =
(error.response && error.response.data && error.response.data.message) || error.message || error.toString();
return thunkAPI.rejectWithValue(message);
}
});
// Login user
export const login = createAsyncThunk("user/login", async (user, thunkAPI) => {
try {
const { username, password } = user;
const res = await authService.loginUser(username, password);
return res;
} catch (error) {
const message =
(error.response && error.response.data && error.response.data.message) || error.message || error.toString();
return thunkAPI.rejectWithValue(message);
}
});
export const logout = createAsyncThunk("user/logout", async () => {
try {
return await logOutUser();
return res;
} catch (error) {
const message =
(error.response && error.response.data && error.response.data.message) || error.message || error.toString();
return thunkAPI.rejectWithValue(message);
}
});
export const userSlice = createSlice({
name: "user",
initialState,
reducers: {
reset: (state) => {
state.isLoading = false;
state.isSuccess = false;
state.isError = false;
state.message = "";
},
},
extraReducers: (builder) => {
builder
.addCase(register.pending, (state) => {
state.isLoading = true;
})
.addCase(register.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.user = action.payload;
})
.addCase(register.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
state.user = null;
})
.addCase(login.pending, (state) => {
state.isLoading = true;
})
.addCase(login.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.user = action.payload;
})
.addCase(login.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
state.user = null;
})
.addCase(logout.fulfilled, (state) => {
state.isSuccess = true;
localStorage.removeItem("token");
localStorage.removeItem("user");
state.user = null;
});
},
});
export const { reset } = userSlice.actions;
export default userSlice.reducer;
for more clalification on the use of extra reducers
checkout this https://www.youtube.com/watch?v=mvfsC66xqj0