0

I'm currently mastering redux and haven't really figured out how to output the data you get from the server using thunk. I in useEffect do a thunk dispatch, get server data, but they don't output because they come after a couple of seconds, so in useState just an empty array, and in store the desired data

// retrieve data from the store

const servicesData = useAppSelector((state) => state.services.services);
const [services, setServices] = useState(servicesData);

// store

export const store = createStore(
  reducers,
  {},
  composeWithDevTools(applyMiddleware(thunk))
);

I understood that useState does not pick up data that comes after a couple of seconds, it turns out it is necessary to add data through setState, but then why thunk? is it necessary to use it at all when receiving any data? I'm completely confused

Dmitry Staver
  • 139
  • 1
  • 2
  • 8

2 Answers2

2

Your problem is the useState call. Never put the result from a useSelector into a useState. It will be used as the "initial state" of the useState and never update that state when the value from useSelector updates - useState doesn't work like that. Just directly use the value from store.

const services = useAppSelector((state) => state.services.services);
phry
  • 35,762
  • 5
  • 67
  • 81
  • Thanks, I thought it was necessary to put them in the useState, but it doesn't seem to work – Dmitry Staver Jun 03 '22 at 20:07
  • No, `useState` is only meant for local component state, not for global state. – phry Jun 03 '22 at 20:19
  • Also, just a FYI, you are writing a stlye of Redux here that is 3 years outdated and 4x the amount of code of modern Redux. Modern Redux does not use switch..case reducers, ACTION_TYPES, action creators, immutable reducer logic or createStore any more. Please see [Why Redux Toolkit is How To Use Redux Today](https://redux.js.org/introductio/why-rtk-is-redux-today) and follow [the official Redux tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) – phry Jun 03 '22 at 20:21
  • 1
    Yeah, I understand that, I just need the old redux to work, I would not use it on my projects, too much unnecessary code :) – Dmitry Staver Jun 03 '22 at 20:35
  • You can always replace the `createStore` with `configureStore`, add your old reducers in there and write modern code for everything going forward. Both can 100% coexist. There is really no reason to write new legacy code. – phry Jun 03 '22 at 20:59
0

Redux Thunk is middleware that allows you to return functions, rather than just actions, within Redux. This allows for delayed actions, including working with promises.

One of the main use cases for this middleware is for handling actions that might not be synchronous, for example, using axios to send a GET request. Redux Thunk allows us to dispatch those actions asynchronously and resolve each promise that gets returned. ` import { configureStore } from '@reduxjs/toolkit' import rootReducer from './reducer' import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService
      }
    })
})

// later
function fetchUser(id) {
  // The `extraArgument` is the third arg for thunk functions
  return (dispatch, getState, api) => {
    // you can use api here
  }
}
Mehdi Baneshi
  • 11
  • 3