CODEWITHSUNDEEP
reduxredux-toolkit
Alex
Alex

Reputation: 323

How to set two separate States with Redux Toolkit?

I'm trying to establish two separate states with Redux Toolkit, one called posts and another called countTest. However, at the moment the two states share the same value.

enter image description here

posts is set to display a value of [] and countTest is set to display a value of 0. How do I differentiate the two states to display their unique value?

My actions file

import { createSlice } from "@reduxjs/toolkit";
import { database, auth } from "../firebase";
import { ref, set } from "firebase/database";

export const counterSlice = createSlice({
  name: "posts",
  initialState: {
    value: [],
  },
  reducers: {
    createAccount: (state, action) => {
      const user = auth.currentUser;
      const uid = user.uid;

      set(ref(database, `users/${uid}`), {
        email: action.payload.email,
        name: action.payload.name,
      });
    },
  },
});

export const testSlice = createSlice({
  name: "countTest",
  initialState: { value: 0 },
  reducers: {
    incrementAmount: (state, action) => {
      state.value = state.value + 1;
    },
    decrementAmount: (state, action) => {
      state.value = state.value - 1;
    },
  },
});

export const { createAccount, countTest } = counterSlice.actions;

export default counterSlice.reducer;

My store file

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./actions";

export const store = configureStore({
  reducer: {
    posts: counterReducer,
    countTest: counterReducer,
  },
});

I know in my store file I'm using counterReducer without specifically referring to the actions createAccount and countTest. How do I go about retrieving the unique values of each and displaying in store? Do I need to create a separate file for each action (is this best practice?) instead of having all the actions in one file?

Thank you for any help

Upvotes: 0

Views: 1196

Answers (1)

LutherW
LutherW

Reputation: 369

You need to use a createAction (on an another file or on one of your slice import action from it) and use extraReducer.

Doc : https://redux-toolkit.js.org/api/createSlice (the last exemple)

Example createAction:

export const incrementAll = createAction("incrementAll");

use on your slices :

reducers : {//what you have for other things},
extraReducers: (builder) => {
    builder.addCase(incrementAll, (state) => {
      state.value++;
    });

See the doc for more information or comment here if you need more explanation

Upvotes: 1

Related Questions