reactjs - redux-toolkit 在reducer 之间共享状态

Question

我构建小型预算计算器，这是我第一次使用 redux-toolkit，问题是
如何在 redux-toolkit 中的 reducer 之间共享/传递状态？ (如何使用余额切片中的 totalIncomes 和 totalExpenses 来计算总余额？

另一个问题是可以使用 redux-toolkit 而不是普通的 redux

收入.js:

const incomesSlice = createSlice({
  name: "incomes",
  initialState: {
    list: [],
    loading: false,
    totalIncomes: 0,
    lastFetch: null,
  },
  reducers: {
    ADD_INCOME: (state, action) => {
      state.list.push({
        id: uuidv4(),
        description: action.payload.description,
        amount: action.payload.amount,
      });
    },
    REMOVE_INCOME: (state, action) => {
      const index = state.list.findIndex(
        (income) => income.id === action.payload.id
      );
      state.list.splice(index, 1);
    },
    TOTAL_INCOMES: (state, action) => {
      state.totalIncomes = state.list.reduce(
        (acc, curr) => acc + curr.amount,
        0
      );
    },
  },
});

费用.js:

const expensesSlice = createSlice({
  name: "expenses",
  initialState: {
    list: [],
    loading: false,
    totalExpenses: 0,
    lastFetch: null,
  },
  reducers: {
    ADD_EXPENSE: (state, action) => {
      state.list.push({
        id: uuidv4(),
        description: action.payload.description,
        amount: action.payload.amount,
      });
    },
    REMOVE_EXPENSE: (state, action) => {
      const index = state.list.findIndex(
        (expense) => expense.id === action.payload.id
      );
      state.list.splice(index, 1);
    },
    TOTAL_EXPENSES: (state, action) => {
      state.totalExpenses = state.list.reduce(
        (acc, curr) => acc + curr.amount,
        0
      );
    },
  },
});

export const {
  ADD_EXPENSE,
  REMOVE_EXPENSE,
  TOTAL_EXPENSES,
} = expensesSlice.actions;
export default expensesSlice.reducer;

平衡.js:

const balanceSlice = createSlice({
  name: "balance",
  initialState: {
    total: 0
  },
  reducers: {
    CALC_TOTAL: (state, action) => {
      // How to Calculate this ?
    },
  },
});enter code here

export const { CALC_TOTAL } = balanceSlice.actions;
export default balanceSlice.reducer;

Answer 1

对于任何研究这个问题的人 - 作者的使用 redux 进行状态管理的方法是错误的。
使用 redux 时，您希望状态尽可能标准化——您不应该存储不需要/重复的状态或可以根据其他状态计算的状态，在本例中，无需保存 totalIncomes，因为我们可以根据列表进行计算收入(总费用和余额也是如此)。
如前所述， totalIncomes 不应该是状态的一部分，而应该是计算值，您可以即时计算或使用选择器。在下面的例子中，我将使用一个选择器。
Redux Toolkit 解决方案
要将它与 Redux 工具包一起使用，它可能看起来像这样，我删除了 brewity 的部分代码:
收入部分

// ...

const incomesSlice = createSlice({
  name: "incomes",
  initialState: {
    list: [],
  },
  reducers: {
    ADD_INCOME: (state, action) => {
      state.list.push({
        id: uuidv4(),
        description: action.payload.description,
        amount: action.payload.amount,
      });
    },
    REMOVE_INCOME: (state, action) => {
      const index = state.list.findIndex(
        (income) => income.id === action.payload.id
      );
      state.list.splice(index, 1);
    },
  },
});


export const getTotalIncome = createSelector(
    totalIncomeSelector,
    calculateTotalIncome,
);

export function totalIncomeSelector(state) {
    return state.incomes.list;
}

export function calculateTotalIncome(incomesList) {
    return incomesList.reduce((total, income) => total + income.amount);    
}

export const {
    ADD_INVOICE,
    REMOVE_INVOICE,
} = incomesSlice.actions;

export default incomesSlice.reducer;

费用切片 - 为酿造而移除的部件

// ...

const expensesSlice = createSlice({
  name: "expenses",
  initialState: {
    list: [],
  },
  reducers: {
    ADD_EXPENSE: (state, action) => {
      state.list.push({
        id: uuidv4(),
        description: action.payload.description,
        amount: action.payload.amount,
      });
    },
    REMOVE_EXPENSE: (state, action) => {
      const index = state.list.findIndex(
        (income) => income.id === action.payload.id
      );
      state.list.splice(index, 1);
    },
  },
});


export const getTotalExpense = createSelector(
    totalExpenseSelector,
    calculateTotalExpense,
);

export function totalExpenseSelector(state) {
    return state.expenses.list;
}

export function calculateTotalExpenseexpenseList) {
    return expensesList.reduce((total, expense) => total + expense.amount); 
}

export const {
    ADD_EXPENSE,
    REMOVE_EXPENSE,
} = expensesSlice.actions;

export default expensesSlice.reducer;

平衡切片 - 这里你真的不需要切片，你只需要一个选择器

import { getTotalIncome, totalIncomeSelector } from './incomeSlice';
import { getTotalExpense, totalExpenseSelector } from './expenseSlice';

export const getBalance = createSelector(
    getTotalIncome,
    getTotalExpense,
    (totalIncome, totalExpense) => totalIncome - totalIncome,
);

示例组件

// ...

function BalanceComponent({
    totalIncome,
    totalExpense,
    balance,
}) {
    return (
        <div>
            <h1>Finance overview</h1>
            <div>
                <span>Total Income:</span>
                <span>{totalIncome}</span>
            </div>
            <div>
                <span>Total Expense:</span>
                <span>{totalExpense}</span>
            </div>
            <div>
                <span>Balance:</span>
                <span>{balance}</span>
            </div>
        </div>
    );
}

function mapStateToProps(state) {
    return {
        totalIncome: getTotalIncome(state),
        totalExpense: getTotalExpense(state),
        balance: getBalance(state),
    }
}

export default connect(mapStateToProps)(BalanceComponent);

注:在这个问题中，作者似乎将他的状态分成了太多的切片，所有这一切都可以通过将所有切片作为一个切片来简单得多。这就是我会做的。