Search code examples
reactjsreact-reduxredux-toolkitredux-reducersredux-actions

Why actions in createSlice RTK doesn't work?


I'm creating the todo-app with Redux Toolkit. In this app I have three slice-components which has almost the same logic. All initial states of these components are reachable, but not the actions and reducers. And states in Redux DevTools are displayed, but not the action types. I do something wrong, but have no idea what is :(

Can you tell me please: what am I doing wrong and why actions in createSlice doesn't work?

Here is my store component:

import { configureStore } from '@reduxjs/toolkit';
import listsReducer from './listsSlice/listsSlice';
import tasksReducer from './tasksSlice/tasksSlice';
import currentListReducer from './currentListSlice/currentListSlice';

export default configureStore({
  reducer: {
      lists: listsReducer,
      tasks: tasksReducer,
      currentList: currentListReducer
  }
});

Here is one of my slice-component:

import { createSlice } from '@reduxjs/toolkit';

const currentListSlice = createSlice({
  name: 'currentList',
  initialState: {
     currentList: {}
  },
  reducers: {
    setCurrentList: (state, action) => {
        state.currentList = {
          ...action.payload.lists.filter(item => action.payload.id == item.id)
        };
    },

    clearCurrentList: (state) => {
        state.currentList = {};
    }
  }
});

export const selectCurrentList = state => state.currentList.currentList;
export const { setCurrentList, clearCurrentList } = currentListSlice.actions;
export default currentListSlice.reducer;

And here is my 'buttonList' component which has 'onClick'-event with dispatching an action from previous slice-component:

import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { selectCurrentList } from '../../store/currentListSlice/currentListSlice';

function ButtonList(props) {
    const dispatch = useDispatch();

    return (
        <button className='listName'
            onClick={() => dispatch(selectCurrentList(props.id))}>
            <span className={`listColorIcon icon ${props.color}`}/>
            {props.listName}
        </button>
    );
}

ButtonList.propTypes = {
    onClick: PropTypes.func,
    listName: PropTypes.string,
    id: PropTypes.number,
    color: PropTypes.string
};

export default ButtonList;

Solution

  • You exported setCurrentList, clearCurrentList actions but emitted an action selectCurrentList like dispatch(selectCurrentList()). Is selectCurrentList an action?

    Try:

    dispatch(setCurrentList()) or dispatch(clearCurrentList())