如何输出通过 Redux Thunk 接收到的数据？

Question

我目前正在掌握 redux，还没有真正弄清楚如何使用 thunk 输出从服务器获得的数据。我在 useEffect 中执行 thunk 调度，获取服务器数据，但它们不输出，因为它们在几秒钟后出现，所以在 useState 中只是一个空数组，并存储所需的数据

// 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))
);

我知道useState不会在几秒后获取数据，原来需要通过setState添加数据，但是为什么会thunk？接收任何数据时是否有必要使用它？我完全糊涂了

Answer 1

Redux Thunk 是允许您 return 功能的中间件，而不仅仅是动作，在 Redux 中。这允许延迟操作，包括使用承诺。

此中间件的主要用例之一是用于处理可能不同步的操作，例如，使用 axios 发送 GET 请求。 Redux Thunk 允许我们异步分派这些动作并解决每个获得 returned 的承诺。 `从'@reduxjs/toolkit'导入{configureStore} 从 './reducer' 导入 rootReducer 从'./api'

导入{myCustomApiService}

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
  }
}

Answer 2

您的问题是 useState 电话。永远不要将 useSelector 的结果放入 useState。它将用作 useState 的“初始状态”，并且当 useSelector 的值更新时永远不会更新该状态 - useState 不能那样工作。直接使用商店中的值即可。

const services = useAppSelector((state) => state.services.services);

如何输出通过 Redux Thunk 接收到的数据？

How do I output the data received through Redux Thunk?

reactjs

redux

react-redux

redux-thunk