I’m experimenting with an App with Redux-Toolkit only and one with a JSON Server in combination with AXIOS. They are both in the same App.

This is why there are some reducers which look very similar in naming, if you are wondering about the strange names.

The _axios_j ones are what is this topic about.

In the reducer upTask I would like to take and access the actual array with my Tasks from the state “tasklist”.

The state has been filled with a JSON file with axios GET request in the App.js.

My issue is, that in my taskSliceAxios I don’t have that state with the actual full state and somehow I cannot use useSelector() because this component isn’t a function.

The payload I get from the button on my form just contains the specific task and its ID.

store.js

import { configureStore } from "@reduxjs/toolkit";
import taskSliceReducerAxiosJ from '../features/taskSliceAxiosJ';
import loginSliceReducerAxiosJ from "../features/loginSliceAxiosJ";
import taskSliceReducerReduxTk from '../features/taskSliceReduxTk';
import loginSliceReducerReduxTk from '../features/loginSliceReduxTk';

const store = configureStore({
  reducer: {
    task_axios_j: taskSliceReducerAxiosJ,
    login_axios_j: loginSliceReducerAxiosJ,
    taskreduxtk: taskSliceReducerReduxTk,
    loginreduxtk: loginSliceReducerReduxTk
  }
})

export default store

Here I would like to take the actual array with the tasks from the state and exchange this items/index which requires this state if I’m right. Could it be my thoughts are going the totally wrong direction?

This here is my View, where i map the array
taskSliceAxios.jsx

import { createSlice } from "@reduxjs/toolkit";
import axios from 'axios'
import { BASE_URL } from '../../assets/database/baseURL';

// Initial State for task
const initialState = {
  task: []
}

const taskSliceAxiosJ = createSlice({
  name: 'task_axios_j',
  initialState,
  reducers: {
    upTask: (state, action) => {
      const index = action.payload
      const moveUp = (ele, index) => {
        mover()

        if (index === 0) return; 
        [state.task[index - 1], state.task[index]] = [state.task[index], state.task[index - 1]];
      };

      axios.patch(`${BASE_URL}/tasks/${index}`, { moveUp })
        .then((response) => {
          console.log(response)
        })
    },

My View Component “TaskAxiosJ.jsx
Here the Button “UP” that calls the dispatchEvent():
(i posted the complete componente here now)

<tbody>
  {props.tasklist.map((ele, id) => {
    return (
      <>
        <tr>
          <td key={ele.id} className="Tasks">
            {ele.Task}
            <Button
              variant="outline-danger"
              className="button"
              onClick={() => dispatchEvent(removeTask(ele.id))}
            >
              DELETE
            </Button>                                     
            <Button
              variant="outline-secondary"
              className="button"
              onClick={() => dispatchEvent(upTask(ele))}
            >
              UP
            </Button> 
          </td>
        </tr>
      </>
    )
  })}
</tbody>

Here the App.jsx where call “useEffect” to load my JSON File for one single time and call the Setter for my tasklist

import TaskAxiosJ from './components/TaskAxiosJ'
import TaskReduxTk from './components/TaskReduxTk'
import 'bootstrap/dist/css/bootstrap.min.css'
import { Routes, Route } from 'react-router-dom'
import Home from './components/Home'
import Contact from './components/Contact'
import { useEffect, useState } from 'react'
import axios from 'axios'
import { BASE_URL } from './assets/database/baseURL'



function App() {


  const [taskValue, setTaskValue] = useState("");
  const [tasklist, setTasklist] = useState([]);




  useEffect(() => {
    axios.get(`${BASE_URL}/tasks`)
      .then((response) => {
        setTasklist(response.data)
        //setLoadingData(true)
      })

      .catch((error) => {
        alert(error.message)
    
      //  setLoadingData(false)
      })
  }, [])



  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Contact" element={<Contact />} />
        <Route path="/TaskAxiosJ" element={<TaskAxiosJ
          setTasklist={setTasklist} setTaskValue={setTaskValue}
          tasklist={tasklist} taskValue={taskValue}
         // loadingData={loadingData}

        />} />
        <Route path="/TaskReduxTk" element={<TaskReduxTk />} />

      </Routes>

    </>
  )
}

export default App

I already tried to wrap my complete const taskSlicheAxiosJ in a enclosing function, so I can use useSelector(). I also tried different spots in the slice where to place the constant which gets the actual state.