Redux工具包：异步调度在react-native中不起作用

idfiyjo8 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(174)

我正在react-native中尝试用redux工具包做一些异步操作。除了createAsyncThunk的实现问题外，这个项目在redux上运行没有任何问题。
我使用了docs中描述的相同逻辑。
在我的Slice中，我将创建createAsyncThunk对象，如下所示：

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(thunkAPI) => {
    const state = thunkAPI.getState();
    console.log("THUNK state.loggedIn: "+state.loggedIn);
    if(state.loggedIn){
        return apiHelper.getAddressDataAsync();
    }
});

与docs相比，它只在const标记之前的export标记中有所不同。为了从外部访问fetchAddressList，我不得不这样做。apiHelper.getAddressDataAsync（）是一个异步方法，它返回一个fetch的结果。
然后我将extraReducers属性添加到切片对象中。

export const appDataSlice = createSlice({
  name: "appDataReducer", 
  initialState:{
    //Some initial variables.
  },
  reducers: {
    //Reducers...
  },
  extraReducers: (builder) => {
    builder.addCase(fetchAddressList.fulfilled, (state, action) => {
        console.log("FULLFILLED::: ",action.payload);
        state.addressList = action.payload.addressList;
        state.defaultAddressId = action.payload.defaultAddressId;
    })
  }
});

export const { /*REDUCER_METHOD_NAMES*/ } = appDataSlice.actions;

使用configureStore将此切片存储在存储区中，其他切片肯定工作正常。
使用调度调用fetchAddressList（）方法不会执行任何操作：

dispatch(fetchAddressList());

我到底做错了什么？希望你能给点提示。

**Edit：**在创建存储对象时，configureStore（）方法中是否需要配置？

下面是我创建store对象的方法：

export const store = configureStore({
    reducer: {
      /*Other reducer objects....,*/
      appDataReducer: appDataSlice.reducer
    },
});

也许这里少了点什么...

redux

来源：https://stackoverflow.com/questions/74207743/redux-toolkit-async-dispatch-wont-work-in-react-native

1条答案

按热度按时间

ruarlubt1#

这是由于createAsyncThunk的使用错误（）-方法。我传递了thunkAPI作为第一个（也是唯一的）参数，该参数链接到通过参数传递到初始调度方法的用户参数（如dispatch(fetchAddressList("ARG_PASSED_TO_FIRST_PARAMETER_OF_ASNYCTHUNK"));）。但是thunkAPI被注入到createAsyncThunk的第二个参数中（）-方法，结果thunkAPI是undefined，因为我没有通过调用dispatch(fetchAddressList());传递任何参数
这是奇怪的，没有任何错误/异常调用一个未定义的对象的方法，虽然=〉thunkAPI.getState()。
解决方案是使用thunkAPI的第二个参数。这样做有两个选择。

1 -将整个thunkAPI加载到第二个参数中，并按如下方式使用：

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(args, thunkAPI) => {
    console.log("TEST: ", thunkAPI.getState());
    thunkAPI.dispatch(...);
});

2 -或通过thunkAPI加载导出的方法：

export const fetchAddressList = createAsyncThunk('/users/fetchAddresses', async(args,{getState, dispatch}) => {
    console.log("TEST: ", getState());
    dispatch(...);
});

两种方式都可以。快乐编码：）

赞(0）回复(0）举报 2022-11-12

我来回答

Redux工具包：异步调度在react-native中不起作用

1条答案

相关问题

热门标签

最新问答