Если состояние содержит объект, содержащий одно свойство, мы все равно должны создать копию и затем изменить ее в редукторе

Question

Я изучаю React и наткнулся на термин «редуктор». У меня есть объект, который выглядит так:

{
  count: 0,
}

Мой вопрос:

Должны ли мы по-прежнему создавать копию и затем изменять ее в редукторе?

См. Мой код ниже:

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREASE':
      return { ...state, count: state.count + 1 };
    case 'DECREASE':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

Должны ли мы по-прежнему использовать ...state, даже если у нас есть только одно свойство count?

Или это нормально для просто изменить значение count напрямую? Вот так: return { count: state.count + 1 };.

Answer 1

Это не плохо для сохранения спреда, но если вы сталкиваетесь с проблемами перфорирования, вы можете не использовать его. Так как для сохранения состояния solid рекомендуется сохранить внешний вид концепции в функции

const setCount => (state, newCount) => ({
  // ...state, // If you want later spread state
  count: newCount
})

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREASE':
      return setCount(state, state.count + 1);
    case 'DECREASE':
      return setCount(state, state.count - 1);
    default:
      return state;
  }
};

В качестве альтернативы, если у вас есть только одно свойство, возможно, вам не нужен объект и вы можете использовать это состояние напрямую. :

// This way `state = 0` instead of `{ count = 0}`
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
};

Просмотр редукции do c: https://redux.js.org/basics/reducers#splitting -reducers : существует много способов использования состояния. Некоторые из них даже не относятся к state, а происходят от action напрямую. Во всех случаях, если вы сохраняете редуктор безопасным и хорошо документированным (если это не общий случай использования / стандарт), вы хороши:)

PS: я рекомендую вам прочитать нативный react useReducer fonctionnality: https://fr.reactjs.org/docs/hooks-reference.html#usereducer, поскольку он охватывает основные случаи использования и может легко заменить структуру приставки.