reactjs - redux toolkit kullanarak birden fazla dilimin durumunu değiştirme

React'te Redux Toolkit kullanarak birden fazla dilimden oluşan bir mağaza durumunu başka, yeni bir durumla nasıl değiştirebilirsiniz?

ExtraReducers kullanarak tüm mağazayı başlangıç durumuna geri alabilirsiniz: aynı mekanizma, mağaza durumunu başlangıç durumundan farklı bir şeye değiştirmek için de kullanılabilir mi?

Örneğin, şöyle bir şeye sahip olurdunuz:

const aSlice = createSlice({ 
  name: 'a', 
  initialState: {a: 1}, 
  reducers: {
    someReducer(state, action) {...}
  }
})
const bSlice = createSlice({ 
  name: 'b', 
  initialState: {b: 'foo'}, 
  reducers: {}
})

const store = configureStore({
  reducer: {
    aReducer: aSlice.reducer,
    bReducer: bSlice.reducer,
  }
});

export type RootState = ReturnType<typeof store.getState>

Bir React bileşeninde durumu şu şekilde güncelleyebilirsiniz:

const dispatch = useDispatch();
dispatch(someReducer({...}));

Bütün mağazanın durumunu şöyle bir şeyle nasıl değiştirirsiniz:

{
  "aReducer": {"a": 2},
  "bReducer": {"b": "bar"},
}

Cevap #1

dermeck'in önerdiği gibi, extraReducers'i gerçekten tür güvenliği ile kullanabilirsiniz.

Minimal bir örnek şöyle olurdu:

import {combineReducers, configureStore, createAction, createSlice, PayloadAction} from "@reduxjs/toolkit";

export const replaceWith = createAction<RootState>('REPLACE_WITH');


const initialState: { a: number } = {
  a: 0
}

export const aSlice = createSlice({
  name: 'a-slice',
  initialState,
  reducers: {
    reduce(state, action: PayloadAction<number>) {
      return {a: action.payload}
    }
  },
  extraReducers: (builder) => {
    builder.addCase(replaceWith, (_, action) => {
      return {
        ...action.payload.aReducer,
      };
    });
  },
});

export const bSlice = createSlice({
  name: 'b-slice',
  initialState: {},
  reducers: {/* TODO */},
  extraReducers: (builder) => {/* TODO */},
});

const rootReducer = combineReducers({
  aReducer: aSlice.reducer,
  bReducer: bSlice.reducer
});

const store = configureStore({
  reducer: rootReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

Ve son olarak, React bileşeninizde şöyle bir şey yapabilirsiniz:

const dispatch = useDispatch();
dispatch(replaceWith(newState));

Cevap #2

Bunun için extraReducer kullanabilirsiniz.

Oluşturulan aksiyona isteğe bağlı bir yük (örneğin {"a": 2, "b": "bar"}) gönderebilirsiniz. createAction ile belirli bir parçaya (slice) "ait olmayan" aksiyonlara sahip olabilirsiniz, bakınız: https://redux-toolkit.js.org/api/createAction ve yalnızca kendi yük kısımlarını kullanan ekstra reducer'ları her iki parçaya (slice) uygularsınız.

İlgili makaleler