redux Reducers vs ExtraReducers作为处理thunks的方法

wfsdck30 于 2023-08-05 发布在其他

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

我目前正在将一个旧的redux代码库转换为使用redux工具包（RTK），我似乎不明白这些方法之间的区别。请考虑以下切片：

interface MyState {
  someItems: string[];
}

const myInitialState: MyState = {
  someItems: []
};

const mySlice = createSlice({
  name: 'mySlice',
  initialState: myInitialState,
  reducers: {
    setItems(state, action: PayloadAction<string[]>) {
      state.someItems = action.payload;
    }
  },
  extraReducers: builder => {
    builder.addCase(fetchItems.fulfilled, (state, action) => {
      state.someItems = action.payload;
    });
  }
});

字符串
我使用redux的传统方式是直接从Thunk调用reducer，但我认为在extraReducers中定义的方式也是可能的。

const fetchItems = createAppAsyncThunk(
  'mySlice/fetchItems',
  async (_, thunkAPI) => {
    try {
      //Get data from backend
      const response = await getItems();

      //Option 1
      thunkAPI.dispatch(mySlice.actions.setItems(response));
      //Option 2
      return response;
    } catch (e) {
      return thunkAPI.rejectWithValue('failed');
    }
  }
);

型
这两种方法之间有何区别？他们中有谁比另一个更受欢迎吗？最后，在做更改时，我经常要重新加载数据以获得最新更新。这一次我相信我 * 已经 * 在Thunk中使用了dispatch。还是有其他选择？

const editItem = createAppAsyncThunk<void, string>(
  'mySlice/fetchItems',
  async (changedValue, thunkAPI) => {
    try {
      //Send data to backend
      await sendSomethingToBackend(changedValue);

      thunkAPI.dispatch(fetchItems());
    } catch (e) {
      return thunkAPI.rejectWithValue('failed');
    }
  }
);

型

redux

来源：https://stackoverflow.com/questions/76614266/reducers-vs-extrareducers-as-a-way-to-handle-thunks

1条答案

按热度按时间

alen0pnh1#

给出：

const fetchItems = createAppAsyncThunk(
  'mySlice/fetchItems',
  async (_, thunkAPI) => {
    try {
      //Get data from backend
      const response = await getItems();

      // Option 1
      thunkAPI.dispatch(mySlice.actions.setItems(response));
      // Option 2
      return response;
    } catch (e) {
      thunkAPI.rejectWithValue('failed');
    }
  }
);

字符串
这两种方法之间有何区别？
从总体上看，就单个mySlice状态片而言，两者之间没有太大区别。主要的区别归结为什么，或者在哪里，可以处理“解析的”thunk。

调度显式操作：thunkAPI.dispatch(mySlice.actions.setItems(response));个
只有mySlicesetItems减速器函数可以响应并处理此操作。
分派隐含的已解析（* 已完成 *）动作：return response;个
任何Redux-Toolkit（RTK）切片的extraReducers函数都可以响应并处理fetchItems.fulfilled操作。

他们中有谁比另一个更受欢迎吗？
这是主观的，但使用Thunk的.pending、.fulfilled和.rejected操作可能是普遍接受的首选方法，因为它提供了更大的灵活性。RTK的一个最重要的目标是减少您需要自己编写的代码量。使用自动生成的Thunk操作是此目标的一部分。

const editItem = createAppAsyncThunk<void, string>(
  'mySlice/fetchItems',
  async (changedValue, thunkAPI) => {
    try {
      //Send data to backend
      await sendSomethingToBackend(changedValue);

      thunkAPI.dispatch(fetchItems());
    } catch (e) {
      thunkAPI.rejectWithValue('failed');
    }
  }
);

型
最后，在做更改时，我经常要重新加载数据以获得最新更新。这一次我相信我必须在thunk内部使用调度。
是的，在这里您绝对 * 需要 * 调度fetchItems操作来重新获取sendSomethingToBackend可能已经在后端更新的数据。
或者有其他选择吗？
如果您正在获取和更新数据，则可以使用Redux-Toolkit Query（RTK查询）作为替代方法。您将创建一个管理查询和变异的API切片。将fetchItems Thunk转换为查询，将editItem Thunk转换为突变，使用cache tags突变可以使查询的数据无效并触发查询自动重新获取。换句话说，进一步减少您编写的代码。

赞(0）回复(0）举报 2023-08-05

我来回答

redux Reducers vs ExtraReducers作为处理thunks的方法

1条答案

相关问题

热门标签

最新问答