标签: redux-toolkit

我有我的减速机

const userAuthSlice = createSlice({
    name: "userAuth",
    initialState: {
        token: '',
    },
    reducers: {
        setToken: (state, action) => state.token = action.payload.test,
    },
});

我有我的调度命令

<button
   value={text.sign_in.submit}
   onClick={() => dispatch(userAuthSlice.actions.setToken({test:"test"}))}

/>

当我按下按钮时，我得到的是这个错误：

我已经隔离了所有内容，以确保这是问题所在，而没有其他问题。

为什么会弹出这个错误？

我将 Redux Toolkit 与下面的 thunk/slice 一起使用。与其在 state 中设置错误，我想我可以通过等待 thunk 承诺解决来在本地处理它们，使用这里提供的示例。

我想我可以避免这样做，也许我应该通过error在 state 中设置 an 来避免这样做，但我有点想了解我在这方面出了什么问题。

Argument of type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' is not assignable to parameter of type 'Action<unknown>'.
  Property 'type' is missing in type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' but required in type 'Action<unknown>'

传递resultAction到时出现错误match：

const onSubmit = async (data: LoginFormData) => {
  const resultAction =  await dispatch(performLocalLogin(data));
  if (performLocalLogin.fulfilled.match(resultAction)) {
    unwrapResult(resultAction)
  } else {
    // resultAction.payload is not available either …

我正在尝试使用 @reduxjs/Toolkit 触发一个简单的操作，但它不起作用。

我看到该操作已调度，但就像切片减速器没有监听它或其他什么。

const say = createAction("ui/say", what => ({ payload: what }));

const uiSlice = createSlice({
  name: "ui",
  initialState: { said: "" },
  reducers: {
    [say.type]: (state, action) => {
      console.log("saying", action.payload); //<-- not showing, why?
      state.currentList = action.payload;
    }
  }
});

const store = configureStore({
  reducer: combineReducers({
    ui: uiSlice.reducer
  })
});

const Chat = () => {
  const dispatch = useDispatch();
  const [whatToSay, setWhatToSay] = useState("");
  const whatWasSaid = useSelector(state => state.ui.said);

  const onSubmit = e => …

我通过创建使用 Redux Toolkit 方法：

1. 带减速器和额外减速器的切片
2. 使用 createAsyncThunk API 进行 thunk

我想了解使用 React 测试库进行测试的最佳方法是什么：

1. 带减速器和额外减速器的切片
2. 使用 createAsyncThunk API 进行 thunk

以下要点中给出了一个示例：https : //gist.github.com/subhranshudas/8021ec6d205a05680bc9e11f3ef7fb7d

任何反馈表示赞赏。

注意：我曾在 Reddit 中问过同样的问题并得到以下答复：https : //www.reddit.com/r/reduxjs/comments/hvwqc9/reduxtoolkit_unit_testing_strategy/ 虽然我很清楚答复中 的“什么”，但我我正在寻找一个明确的“如何”与 React 测试库。

抱歉，如果这是一个明显的问题，但我有兴趣在 React 测试库中查看确定的方法（因为我是新手）

谢谢！

我正在使用 redux-toolkit 并有 2 个切片：“auth”和“profile”

auth => 处理有关令牌
配置文件的信息 => 处理有关用户帐户的信息

当用户尝试登录时，我向 api 发送请求，该请求返回用户令牌和帐户信息。然后我需要保存这些信息。我将令牌放入相应的字段（在同一切片中）。我需要将我的帐户信息放入“profile”切片（登录处理发生在“auth”切片中）。现在我只是从“auth”切片分派 setProfile 操作。

从“auth”切片分派“profile”操作是否是反模式？或者我必须将此逻辑从 redux 移至组件？或者在切片之外进行“登录”操作？或者我需要将它们全部保留在一片中吗？

// PROFILE SLICE | profile.js 

const initialState = {
  data: {},
  status: 'idle'
}

export const profileSlice = createSlice({
  name: 'profile',
  initialState,
  reducers: {
    setProfile(s, {payload: profile}) {
      s.profile = profile
    }
  }
})

export const {setProfile} = userSlice.actions;
export default profileSlice.reducer


// AUTH SLICE | auth.js

import {setProfile} from './profile' // import action creator from profile slice

const initialState = …

我检查了 redux 工具包文档，但没有看到此典型用例的示例：不发送具有无效参数的查询请求。

例如，对端点 /categories/{name} 的 get 请求需要名称值。如果名称没有值，则不应发出请求。

const baseQuery = fetchBaseQuery({
  baseUrl: Constants.PATHWAY_API_URL
});

export const pathwayApi = createApi({
  reducerPath: 'pathwayApi',
  baseQuery: baseQueryWithReAuth,
  endpoints: builder => ({
    getSubCategories: builder.query({
      // NETWORK REQUEST SHOULD NOT BE MADE IF "name" param is falsy
      query: name => `${Constants.PATHWAY_API.CATEGORIES_PATH_NAME}/${name}`,
    }),
  }),
});

我想将这种类型的参数验证添加到需要一个或多个参数值的所有查询中。在 createApi （或可能是 fetchBaseQuery）层处理此验证的推荐方法/模式是什么？提前致谢！

我使用@reduxjs/toolkit并且我的状态包含：allSlides: ISlide[];

当我尝试改变任何事情时，allSlides比如前。

setAllSlides(state, action: PayloadAction<ISlide[]>) {
  state.allSlides = action.payload;
},
storeNewSlide(state, action: PayloadAction<ISlide>) {
  state.allSlides.push(action.payload);
},

我收到 TS 错误

Type 'ISlide' is not assignable to type 'WritableDraft<ISlide>'

我对更改原始值数组或仅对象中的一个属性没有问题，但我不知道如何正确更改整个数组或数组中的特定对象。

我正在尝试使用 getState() 方法访问另一个切片的减速器中另一个切片的状态，但看起来这是不允许的，因此 Web 应用程序会中断。

有谁知道访问另一个切片的减速器内一个切片的状态的推荐方法是什么？我的网络应用程序需要这个。

预先感谢您的任何帮助

简化示例

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

    type Cake = {
      flavor: string;
      size: 'S' | 'M' | 'L';
    };

const initialState: { all: Cake[]; meta: { currentPage: number } } = {
  all: [],
  meta: {
    currentPage: 0,
  },
};

const cakeSlice = createSlice({
  name: 'cake',
  initialState,
  reducers: {
    fetchAll(
      state,
      action: PayloadAction<Cake[], string, { currentPage: number }>,
    ) {
      state.all = action.payload;
      state.meta = action.meta;
    },
  },
});

export default cakeSlice;

我收到这些错误。

Type '
(state: {
    all: …

我有以下切片和函数。如何获取存储在初始状态中的值？

const example = createSlice({
  name: "example",
  initialState: {
   firstName: hello,
   lastName: world
  },
  reducers: {}
 })

export const create = (id) => {
  return async (dispatch) => {
      const currentState = getState()
      console.log(currentState) 
  };
};

我是否必须使用 useSelector 并将值再次传递给函数？理想情况下希望直接从已保存的状态获取数据