@reduxjs/toolkit#createSlice JavaScript Examples

appSlice = createSlice({
  name: 'app',
  initialState: {
    channelId: null,
    channelName: null,
  },
  reducers: {
    setChannelInfo: ( state, action ) => {
      state.channelId = action.payload.channelId
      state.channelName = action.payload.channelName
    },
  },
})

authSlice = createSlice({
  name: "auth",
  initialState: {
    authError: null,
    userType: null,
    userInfo: null,
    loading: false
  },
  reducers: {
    setAuthError(state, action) {
      state.authError = action.payload;
    },
    setUserType(state, action) {
      state.userType = action.payload;
    },
    setUserInfo(state, action) {
      state.userInfo = action.payload;
    },
    setLoading(state, action) {
      state.loading = action.payload;
    }
  }
})

appSlice = createSlice({
  name: 'app',
  initialState: { element: 'anemo', light: false },
  reducers: {
    setElement: (state, action) => {
      const cssValue = elements.find(({ name }) => name === action.payload);
      document.documentElement.style.setProperty('--active', cssValue.color);
      return { ...state, element: action.payload };
    },
    setLight: (state, { payload: light }) => {
      if (light) {
        document.documentElement.className = 'light';
      } else {
        document.documentElement.className = '';
      }
      return {
        ...state,
        light,
      };
    },
  },
})

sidebarSlice = createSlice({
  name: 'sidebar',
  initialState,
  reducers: {
    toggleSidebar: (state, action) => ({
      ...state,
      isOpen: action.payload,
    }),
  }
})

appSlice = createSlice({
  name: 'app',
  initialState: {
    screenWidth: window.innerWidth
  },
  reducers: {
    screenResize: state => {
      state.screenWidth = window.innerWidth;
    }
  }
})

authenticationSlice = createSlice({
  name: 'authentication',
  initialState,
  reducers: {
    login(state) {
      state.loader = true;
    },
    loginSuccess(state, action) {
      state.loader = false;
      state.isAuthenticated = !!action.payload.token
    },
    loginFailure(state) {
      state.loader = false;
      state.isAuthenticated = false;
    },
  },
})

retailSlice = createSlice({
  name: 'retail store',
  initialState: {
    products: products,
    cartItems: [],
    favorites: [],
    showProductDetails: null
  },
  reducers: {
    showDetails: (state, action) => {
      state.showProductDetails = state.products.find(
        product => product.id === action.payload
      )
    },
    addToFavorites: (state, action) => {
      state.favorites = [...state.favorites, action.payload]
    },
    addToCart: (state, action) => {
      state.cartItems = [
        ...state.cartItems.filter(item => item.id !== action.payload.id),
        {
          id: action.payload.id,
          title: action.payload.title,
          price: action.payload.price,
          quantity: action.payload.quantity
        }
      ]
    }
  }
})

farmsSlice = createSlice({
  name: 'farms',
  initialState,
  reducers: {
    ...commonFarmsAction,
    ...activeFarmsActions,
    ...inactiveFarmsActions,
    ...stakingFarmsActions,
    ...unstakingFarmsAction,
    ...harvestFarmsAction,
    ...otherFarmsActions,
  },
})

filters = createSlice({
  name: 'filters',
  initialState: filtersInitialState,
  reducers: {
    // single recommendation page
    updateAffectedClustersFilters(state, action) {
      state.affectedClustersState = action.payload;
    },
    // recommendations list page
    updateRecsListFilters(state, action) {
      state.recsListState = action.payload;
    },
    // clusters list page
    updateClustersListFilters(state, action) {
      state.clustersListState = action.payload;
    },
    // single cluster page
    updateClusterRulesFilters(state, action) {
      state.clusterRulesState = action.payload;
    },
  },
})

actionStatusSlice = createSlice({
  name: 'actionStatus',
  initialState: {},
  reducers: {},
  extraReducers: (builder) => {
    builder.addMatcher(
      (action) => action.type.includes('action'),
      (state, action) => {
        const [name, , status] = action.type.split('/');
        state[name] = status;
      }
    );
  },
})

appSlice = createSlice({
  name: 'app',
  initialState: {
    username: null,
  },
  reducers: {
    setUsername(state, action) {
      return {
        ...state,
        username: action.payload,
      };
    },
  },
})

tagSlice = createSlice({
  name: "tag",
  initialState: {
    search: {
      tag: {},
      topics: [],
      isCompleted: true,
    },
  },
  reducers: {},
  extraReducers: {
    [tagSearch.fulfilled]: (state, action) => {
      state.search.tag = {
        _id: action.payload._id,
        name: action.payload.name,
        hexColorCode: action.payload.hexColorCode,
      };
      state.search.topics = action.payload.topics;
      state.search.isCompleted = true;
    },
    [tagSearch.pending]: (state, action) => {
      state.search.isCompleted = false;
    },
    [tagSearch.rejected]: (state, action) => {
      state.search.isCompleted = false;
    },
  },
})

uiSlice = createSlice({
  name: "ui",
  initialState: initial_states,
  reducers: {
    updateShowTour: (state, action) => {
      state.show_tour = action.payload;
    },
    setGdReady: (state, action) => {
      state.is_gd_ready = action.payload;
    },
    setIsBotRunning: (state, action) => {
      state.is_bot_running = action.payload;
    },
    setAccountSwitcherLoader: (state, action) => {
      state.account_switcher_loader = action.payload;
    },
    updateShowMessagePage: (state, action) => {
      state.show_bot_unavailable_page = action.payload;
    },
    setAccountSwitcherToken: (state, action) => {
      state.account_switcher_token = action.payload;
    },
    setIsHeaderLoaded: (state, action) => {
      state.is_header_loaded = action.payload;
    },
    setShouldReloadWorkspace: (state, action) => {
      state.should_reload_workspace = action.payload;
    },
  },
})

counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    }
  }
})

counterSlice = createSlice({
  name: "ui",
  initialState: {
    volume: 0,
    micVolume: 0,
  },
  reducers: {
    setVolume(state, action) {},
  },
})

user = createSlice({
  name: "user",
  initialState: {
    currentUser: null,
    userId: null,
  },
  reducers: {
    updateCurrentUser: (state, action) => {
      state.currentUser = action.payload;
    },
    updatedUserId: (state, action) => {
      state.userId = action.payload;
    },
  },
})

paperSlice = createSlice({
  name: 'paper',
  initialState,
  reducers: {
    setCurrentPaper: (state, action) => {
      state.paperId = action.payload;
    },
  },
})

channelRecommendationSlice = createSlice({
  name: "channelRecommendation",
  initialState: {
    isFetching: true,
    channels: [],
  },
  reducers: {
    toggleSubscribeChannelRecommendation(state, action) {
      state.channels = state.channels.map((channel) =>
        channel.id === action.payload
          ? { ...channel, isSubscribed: !channel.isSubscribed }
          : channel
      );
    },
  },
  extraReducers: {
    [getChannels.fulfilled]: (state, action) => {
      state.isFetching = false;
      state.channels = action.payload;
    },
  },
})

notifySlice = createSlice({
    name: 'notify',
    initialState,
    reducers: {
        notificationAdded: notifyAdapter.upsertOne,
        notificationsAdded: notifyAdapter.upsertMany,
        notifRead: (state, action) => {
            let notif = action.payload
            notifyAdapter.upsertOne(state, {
                ...notif,
                read: true,
            })
        },
    },
    extraReducers: {
        [fetchNotifs.pending]: state => {
            state.status = 'loading'
        },
        [fetchNotifs.rejected]: state => {
            state.status = 'idle'
        },
        [fetchNotifs.fulfilled]: state => {
            state.status = 'idle'
        },
    },
})

filtersSlice = createSlice({
  name: "filters",
  initialState: {
    years: [],
    categories: [],
    technologies: [],
    topics: [],
  },
  reducers: {
    addFilter: (state, action) => {
      const { name, val } = action.payload
      state[name] = [...state[name], val]
    },
    removeFilter: (state, action) => {
      const { name, val } = action.payload
      state[name] = state[name].filter(v => v !== val)
    },
    setFilters: (state, action) => {
      const { years, categories, technologies, topics } = action.payload
      state.years = years
      state.categories = categories
      state.technologies = technologies
      state.topics = topics
    },
    clearFilters: state => {
      state.years = []
      state.categories = []
      state.technologies = []
      state.topics = []
    },
  },
})

notificationsSlice = createSlice({
  name: NAMESPACE,
  initialState,
  reducers: {
    setNotifications: (state, { payload }) => {
      state.notifications.next = payload.next;
      state.notifications.results = [
        ...state.notifications.results,
        ...payload.results,
      ];
    },
    setUnreadNotificationsCount: (state, { payload }) => {
      state.unreadCount = payload;
    },
    unsetNotification: (state, { payload }) => {
      state.notifications.results = (
        state.notifications.results.filter((obj) => obj.id !== payload)
      );
    },
  },
})

slice = createSlice({
  name: 'courseDetail',
  initialState: {
    courseId: null,
    status: null,
    canChangeProvider: null,
  },
  reducers: {
    updateStatus: (state, { payload }) => {
      state.courseId = payload.courseId;
      state.status = payload.status;
    },
    updateCanChangeProviders: (state, { payload }) => {
      state.canChangeProviders = payload.canChangeProviders;
    },
  },
})

blocksSlice = createSlice({
  name: 'courseBlocks',
  initialState: {
    status: RequestStatus.IN_PROGRESS,
    topics: {
      // Maps topic id to the discussion course path and link
    },
    // List of chapter blocks in the course. Rest of the structure can be derived from children of topics
    chapters: [],
    // Mapping of block keys to block data
    blocks: {},
  },
  reducers: {
    fetchCourseBlocksRequest: (state) => {
      state.status = RequestStatus.IN_PROGRESS;
    },
    fetchCourseBlocksSuccess: (state, { payload }) => {
      state.status = RequestStatus.SUCCESSFUL;
      Object.assign(state, payload);
    },
    fetchCourseBlocksFailed: (state) => {
      state.status = RequestStatus.FAILED;
    },
    fetchCourseBlocksDenied: (state) => {
      state.status = RequestStatus.DENIED;
    },
  },
})

slice = createSlice({
  name: STORE_NAMES.EDIT,
  initialState: libraryEditInitialState,
  reducers: {
    libraryUpdateRequest: (state) => {
      state.submissionStatus = SUBMISSION_STATUS.SUBMITTING;
    },
    libraryUpdateSuccess: (state) => {
      state.submissionStatus = SUBMISSION_STATUS.SUBMITTED;
    },
    libraryUpdateFailed: (state, { payload }) => {
      state.errorMessage = payload.errorMessage;
      state.errorFields = payload.errorFields;
      state.submissionStatus = SUBMISSION_STATUS.FAILED;
    },
    libraryClearError: (state) => {
      state.errorMessage = null;
      state.errorFields = null;
    },
  },
})

calculatorsSlice = createSlice({
    name: 'calculators',
    initialState: INITIAL_STATE,
    reducers: {
        updateCalculatorsSkill: (state, action) => {
            state.skill = action.payload.skill;
        },
        updateSingleCalculatorsExpValue: (state, action) => {
            const { xp, level, type } = action.payload;
            state.expValues[type] = {
                ...state.expValues[type],
                xp,
                level,
            };
        },
        updateCalculatorsExpValues: (state, action) => {
            const { start, target } = action.payload;
            if (!start || !target) {
                throw new Error('You need to provide both start and target XP value objects ?');
            }
            state.expValues = {
                ...action.payload,
            };
        },
        updateCalculatorsMode: (state, action) => {
            const { mode, type } = action.payload;
            state.expValues[type].mode = mode;
        },
        updateCalculatorsTier: (state, action) => {
            state.calculatorTier = action.payload;
        },
        reset: () => INITIAL_STATE,
    },
})

counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
})

categories = createSlice({
  name: "categories",
  initialState,
  reducers: {
    getCategoriesStart(state) {
      state.loading = true;
    },
    getCategoriesSuccess(state, action) {
      state.data = action.payload.data;
      state.loading = false;
    },
  },
})

complexSlice = createSlice({
  name: "complex",
  initialState: [{
    id: 1,
    food: {
        name: "apple",
        taste: "great"
    }
  }],
  reducers: {
    add(state, _action) {
      state.push({
          id: state.length + 1,
          food: {
              name: randomFood(),
              taste: randomTaste()
          }
      });
    },
    remove(state, _action) {
        const randIndex = Math.floor(Math.random() * state.length);
        state.splice(randIndex, 1);
    }
  }
})

themeProviderSlice = createSlice({
    name: 'themeProvider',
    initialState: {
        theme: palette.light,
        current: "light",
    },
    reducers: {
        toggleTheme: (state) => {
            state.current = (state.current == "light") ? "dark" : "light";
            state.theme = palette[state.current];
            document.body.style = `background: ${[palette[state.current].background]};`;
        },
    },
})