Javascript 如何使一个切片调用减速器对应于另一个调度

发布于08月23日

我使用的是Reaction，我得到了一个Redux-Toolkit(RTK)状态片，它与本地存储(我使用的是redux-persist库)一起持久化.简化后是这样的:

const initLocations = []

const locationsPersistentSlice = createSlice({
  {
  name: "locations",
  initLocations,
  reducers: {
    addLocation(prevState, action) {
      // adding new location to store
    },
    clearLocations() {
      return []
    }
  }
})

它可以同步、完美地工作.

但是，我想添加第二个片locationInfoSlice，它应该在分派addLocation()操作时使用列表中的最后一个位置获取数据.

我怎样才能做到这一点呢？我想大概是extraReducers或asyncThunk，但没弄对.

推荐答案

但是，我想添加第二个切片locationInfoSlice，这应该会获取调度addLocation()操作时的数据，使用最新的列表中的位置.

如果我对你的帖子/问题的理解是正确的，那么你实际上想要发送some个单一操作，并执行以下操作:

在state.locations数组中存储一个位置
处理一些异步操作/逻辑，以使用state.locations数组中的最后一个位置获取一些数据.

我怎样才能做到这一点呢？我想大概是extraReducers或asyncThunk，但做得不对.

您可能需要同时使用这两种方法.单靠extraReducers是行不通的，因为Reducer函数是纯同步函数，没有副作用，例如它们不能异步获取数据.我的建议是创建一个Thunk，它调度addLocation操作来更新state.locations状态，并使您需要的数据获取可以返回一个值，该值将用于更新extraReducers的locationInfoSlice‘S状态.

import { createAsyncThunk } from '@reduxjs/toolkit';
import { addLocation } from '../locationsPersistentSlice';

export const addLocationAsync = createAsyncThunk(
  "locations/addLocationAsync",
  async (location, thunkApi) => {
    // dispatch to add new location
    thunkApi.dispatch(addLocation(location));

    try {
      // asynchronous fetch logic
      return data;
    } catch(error) {
      return thunkApi.rejectWithError(error);
    }
  },
);

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

const initialState = [];

const locationsPersistentSlice = createSlice({
  name: "locations",
  initialState,
  reducers: {
    addLocation(state, action) {
      state.push(action.payload);
    },
    clearLocations() {
      return initialState;
    },
  },
});

export const {
  addLocation,
  clearLocations,
} = locationsPersistentSlice.actions;

export default locationsPersistentSlice.reducer;

import { createSlice } from '@reduxjs/toolkit';
import { addLocationAsync } from './action';

const initialState = /* whatever this initial state value is */;

const locationInfoSlice = createSlice({
  name: "locationInfo",
  initialState,
  extraReducers: builder => {
    builder
      .addCase(addLocationAsync.fulfilled, (state, action) => {
        // update state with fetched data
      })
      .addCase(addLocationAsync.rejected, (state, action) => {
        // update state with error status???
      })
      .addCase(addLocationAsync.pending, (state, action) => {
        // set any pending/loading state
      });
  },
});

export default locationInfoSlice.reducer;

在用户界面中，它不是直接分派addLocation操作，而是分派addLocationAsync操作.

import { useDispatch } from 'react-redux';
import { addLocationAsync } from './action';

...

const dispatch = useDispatch();

...

dispatch(addLocationAsync(/* some location value */));

...