import { createSlice } from '@reduxjs/toolkit'

export const countersSlice = createSlice({
    name: 'based? based on what',
    initialState: [0, 0, 0, 0],
    reducers: {
        updateCounter: (state, action) => {
            var id = action.payload.id
            var value = action.payload.value

            state[id] += value
        }
    }
})

export const { updateCounter } = countersSlice.actions

export const selectCount = id => state => state.counter[id]

export default countersSlice.reducer

Why is it that, in the selectCount line, I have to use state.counter when .counter isn't referenced anywhere else in the slice? I do like that it's .counter but I just want to understand how it's ing up with that property.

import { createSlice } from '@reduxjs/toolkit'

export const countersSlice = createSlice({
    name: 'based? based on what',
    initialState: [0, 0, 0, 0],
    reducers: {
        updateCounter: (state, action) => {
            var id = action.payload.id
            var value = action.payload.value

            state[id] += value
        }
    }
})

export const { updateCounter } = countersSlice.actions

export const selectCount = id => state => state.counter[id]

export default countersSlice.reducer

Why is it that, in the selectCount line, I have to use state.counter when .counter isn't referenced anywhere else in the slice? I do like that it's .counter but I just want to understand how it's ing up with that property.

• javascript
• redux
• redux-toolkit

Share Improve this question Follow edited Aug 23, 2021 at 1:11 Andria 5,08533 gold badges2727 silver badges4141 bronze badges asked Aug 21, 2021 at 18:10 ontleyontley 9122 silver badges99 bronze badges 2

• You should try to explain what does that code is supossed to do before anyone can try to help you. Trying to guess what is supossed to do that code, you're right, selectCount is doing nothing. You should store a field like chosenCounter, and save on it the id of the counter you want to update. However, like I've mentioned before, you should tell what you're trying to implement and then people will be able to help you. – dlopez Commented Aug 21, 2021 at 18:16
• But it does appear to be doing something, I'm importing it into other files which use it in for a p tag (just a small dumb test project while I'm learning) hastebin./umadogatud.js If I change .counter to something else, it breaks the entire project – ontley Commented Aug 21, 2021 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

The name property in createSlice is used internally by redux-toolkit to create the names for your actions. If the name is 'counter' then the updateCounter action will have { type: 'counter/updateCounter' }. If it's 'abc' then your action will have { type: 'abc/updateCounter' }. This name doesn't matter. As long as it's different from any other reducers in your app then you're fine.

If I change .counter to something else, it breaks the entire project

Now you are talking about something else, which is how you select your data from the root state of your app.

export const selectCount = id => state => state.counter[id]

This selector function assumes that the reducer from this slice will be on the counter property of your root reducer. The location of this reducer relative to the root state is determined by the property key when you bine your reducers with configureStore or bineReducers.

Your current selector assumes that your store looks like this:

import {configureStore} from '@reduxjs/toolkit';
import counterReducer from './yourReducerFile.js'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

This property key often matches the name of your slice, but it doesn't have to match.

You can use any property key as long as the selector function uses the same one. For example:

export default configureStore({
  reducer: {
    someOtherProperty: counterReducer
  }
});

export const selectCount = id => state => state.someOtherProperty[id]