CODEWITHSUNDEEP
reactjsreduxreact-reduxpackage.jsonredux-toolkit
baba mama
baba mama

Reputation: 33

I am having dependency issues installing Redujx-toolkit

When I'm using useSelector Hook from react-redux, sometimes I got a error says: "useSyncExternalStore is not a function". I tried to search google to fix the problems, but i didn't find anything.

Here's my full code on stackblitz: https://stackblitz.com/edit/react-ts-k7tfxu?file=components%2FTodoList.tsx

TodoList.tsx

import React from 'react';
import TodoItem from './TodoItem';
import { useAppSelector } from '../app/hooks';

const TodoList = () => {
  //if I remove this line, it's work fine!
  const list = useAppSelector((state) => state.todos.list);

  return (
    <ul>
      <TodoItem {...list} />
    </ul>
  );
};

export default TodoList;

store.tsx

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './features/todos-slice';

export const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

my custom Hooks

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { RootState, AppDispatch } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

createSlice file

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { TodoState } from '../../interface';

interface Todos {
  list: TodoState[];
}

const initialState: Todos = {
  list: [
    {
      id: 1,
      text: 'Learn Javascript',
      done: false,
    },
    {
      id: 2,
      text: 'Learn React',
      done: false,
    },
    {
      id: 3,
      text: 'Build a React App',
      done: false,
    },
  ],
};

export const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {},
});

export default todosSlice.reducer;

Upvotes: 0

Views: 760

Answers (2)

baba mama
baba mama

Reputation: 33

I found a problems! It's new Hook from React v.18, and it's still in beta :). Sometimes, stackblitz recommended me to add newest version of react and got error. I'm use the older version and it worked beautifully

Upvotes: 1

Justin Meskan
Justin Meskan

Reputation: 683

You need to make sure all your versions are in sync. When upgrading your version of react in an on going project you will need to pay close attention to all the dependencies it has. there are some npm commands you can try.

npm install --force, or --legacy-peer-deps

this will help with older conflicting versions

Upvotes: 1

Related Questions