在 redux 工具包中从一个切片访问存储数据到另一个切片以在 API 中传递自定义参数答案

【问题标题】：access store data from one slice to another slice in redux toolkit to pass custom param in API在 redux 工具包中从一个切片访问存储数据到另一个切片以在 API 中传递自定义参数
【发布时间】：2023-01-31 17:18:56
【问题描述】：

个人资料切片：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { IMAGE_API, ACCESS_KEY } from "../../app/utils/constant";

export const getImages = createAsyncThunk('images', async () => {
  return fetch(`${IMAGE_API + ACCESS_KEY}`).then((res) =>
    res.json()
  )
})
console.log(IMAGE_API + ACCESS_KEY);

const ProfilePicSlice = createSlice({
  name: 'imageList',
  initialState: {
    images: [],
    loading: false,
  },
  extraReducers:  (builder) => {
    builder.addCase(getImages.pending, (state) => {
      state.loading = true;
    })
    builder.addCase(getImages.fulfilled, (state, action) => {
      state.loading = false;
      state.images.push(action.payload);
      console.log(action.payload)
    })
    builder.addCase(getImages.rejected, (state) => {
      state.loading = true;
    })
  }
});

export default ProfilePicSlice.reducer

表格切片：

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

const initialState = []

const UserSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: (state, action) => {
      state.push(action.payload);
    }
  }
});

export const {addUser} = UserSlice.actions;
export default UserSlice.reducer;

我想在 asyncThunk '${IMAGE_API + 'custom param' + ACCESS_KEY} 的 API URL 中添加自定义参数

自定义参数应该来自表单切片数据。

【问题讨论】：

标签： javascript reactjs redux redux-toolkit

【解决方案1】：

redux-toolkit async thunks 能够访问ThunkAPI，它包含一个获取当前 redux 状态对象的函数，它是传递给 thunk 回调的第二个参数。从这里您可以选择您需要的状态值。

见PayloadCreator。

例子：

export const getImages = createAsyncThunk(
  'imageList /images',
  (_, { getState }) => {
    const store = getState();

    const param = state.users./* access into state to get property */;

    return fetch(`${IMAGE_API}${param}${ACCESS_KEY}`)
      .then((res) => res.json());
  }
);

【讨论】：