i use createSlice from redux toolkit to create my reducers, where I defined the states
below is the code for my store in ./root/app/store.js
import { configureStore } from "@reduxjs/toolkit";
import calendarReducer from '../features/calendarSlice'
import windowReducer from '../features/windowSlice'
import startReducer from '../features/startSlice'
export const store = configureStore({
reducer: {
calendar: calendarReducer,
window: windowReducer,
start: startReducer
},
})
and here is the code for my calendarSlice located at ./root/features/calendarSlice.jsx
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
value: false
}
export const calendarSlice = createSlice({
name: "calendar",
initialState,
reducers: {
openCalendar : (state) => {
state.value = true
},
closeCalendar: (state) => {
state.value = false
},
closeCalendarOnOtherLayoutsClick: (state) => {
state.value = false
}
}
});
export const {openCalendar, closeCalendar} = calendarSlice.actions
export default calendarSlice.reducer
and this is my startSlice in ./root/features/startSlice.jsx
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
value: false
}
export const startSlice = createSlice({
name:'start',
initialState,
reducers: {
openStart: (state) => {
state.value = true
},
closeStart: (state) => {
state.value = false
}
}
});
export const {openStart, closeStart} = startSlice.actions
export default startSlice.reducer
The following code showcases my main component with imported components like calendar and start. When clicking on the clock, the calendar component opens upon the first click and closes on the second click. However, when directly clicking on the calendar, it closes itself. I am looking for solutions using Redux actions.
import styles from "./dock.module.scss";
import { useRef } from "react";
import Image from "next/image";
import { openCalendar,closeCalendar } from '../../../features/calendarSlice'
import { openStart, closeStart } from '../../../features/startSlice'
import { useDispatch, useSelector } from 'react-redux'
import Start from '../start/Start'
import Calendar from "./Calendar";
// Main Dock Component Code
...