redux toolkit - dispatch() inside useEffect passing null value as payload

[joshtheflame]

I built a small application "Task Manager" using Context API and now while learning redux toolkit I am currently transforming this application from ContextAPI to redux toolkit. I am also using "React-Query" to fetch data from the backend where all my tasks are stored and storing in an array "mydata" which I am passing to dispatch along with current state to update the state but getting null value of that array I am passing. what am I doing wrong? appreciate if someone can help me.

Store.js

import { configureStore } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";

const initialBtnState = { showAddTaskBtn: false };

const showAddSlice = createSlice({
  name: "AddTask",
  initialState: initialBtnState,
  reducers: {
    toggleAddTask(state) {
      state.showAddTaskBtn = !state.showAddTaskBtn;
    },
  },
});

const initialTaskState = { mystate: [] };

const taskSlice = createSlice({
  name: "TaskOperations",
  initialState: initialTaskState,
  reducers: {
    FetchTasks(state, action) {
      state.mystate = [...state.mystate, action.payload];
    },
    AddTask(state, action) {},
    DeleteTask(state) {},
    toggleReminder(state) {},
  },
});

const store = configureStore({
  reducer: { taskbtn: showAddSlice.reducer, tasks: taskSlice.reducer },
});

export const showAddActions = showAddSlice.actions;
export const taskActions = taskSlice.actions;

export default store;

Tasks.js

import { useContext, useEffect, useState } from "react";
import Task from "./Task";
import { useQuery } from "react-query";
import { getTasks } from "../api/Tasks_Api";
import { DataContext, DataProvider } from "../context/DataContext";
import { useSelector, useDispatch } from "react-redux";
import { taskActions } from "../store";

let isInitial = true;

const Tasks = ({ task }) => {
  const dispatch = useDispatch();
  const mystate = useSelector((state) => state.tasks.mystate);

  //const { mystate, setState } = useContext(DataContext);

  const {
    status,
    isError,
    error,
    isFetching,
    data: mydata = [],
  } = useQuery("TasksData", getTasks);

  useEffect(() => {
    if (isInitial) {
      isInitial = false;
      return;
    }

    if (status === "success" || mydata.length === 0) {
      dispatch(taskActions.FetchTasks(mystate, mydata));
    }
  }, [status, mydata]);

  return (
    <>
      {mystate.length < 1
        ? "No tasks available"
        : mystate.map((item, index) => <Task key={item.id} task={item} />)}
    </>
  );
};

export default Tasks;

[phryneas]

Sorry, I'm on mobile, so pretty short:

Just dispatch the action(payload), not action(state, payload).

Also, generally you would not do data fetching inside your component using Redux - please take a look at our "Essentials" tutorial on the Redux homepage 🙂

[joshtheflame]

well if I am passing only action (as payload) then inside reducer function I am unable to access state. I am not doing data fetching via redux I am using UseQuery function of react-query and using that returned array into dispatch() to update the state.

const initialTaskState = { mystate: [] };

const taskSlice = createSlice({
  name: "TaskOperations",
  initialState: initialTaskState,
  reducers: {
    FetchTasks(action) {
      state.mystate = [...state.mystate, action.payload];
      console.log(action.payload);
    },

for some reason I am getting undefined here on dispatch

 const {
   status,
   isError,
   error,
   isFetching,
   data: mydata = [],
 } = useQuery("TasksData", getTasks);

useEffect(() => {
   if (isInitial) {
     isInitial = false;
     return;
   }

   if (status === "success" || mydata.length === 0) {
     console.log("Inside success");
     dispatch(taskActions.FetchTasks(mydata));
   }
 }, [status, mydata]);

[phryneas]

Redux passes in the last state as the first argument, not you. Calling the action creator does not immediately call the reducer.

The reducer is (state, action) but you call the action creator with (payload) - those are two different functions.

[phryneas]

And please, don't move state over from React Query into Redux. React Query is already managing that state for you, you don't need a second tool on top of that. Copying data from tool to tool like that will give you a synchronization nightmare, but not give you a lot of benefits. Try to keep data in one tool that has the ownership over it.

[joshtheflame]

And please, don't move state over from React Query into Redux. React Query is already managing that state for you, you don't need a second tool on top of that. Copying data from tool to tool like that will give you a synchronization nightmare, but not give you a lot of benefits. Try to keep data in one tool that has the ownership over it.

I completely agree with you as I am just learning react and all so was confused about how react-query manages state and all but i loved the feature of react-query so thought to incorporate it. I will stick to redux-toolkit for state management therefore will change the fetching mechanism via fetch method and then try dispatch inside useEffect().

[phryneas]

You can also just use React Query for your api data and RTK for your application data - you can use them side by side. Just don't replicate data from one to the other without good reason.