你如何將一個React useState掛鈎分解成一個命名空間？

Question

根據個人喜好，我將React道具包裝在名稱空間中。 它可以幫助我整理不同道具的來源。

使用useState掛鈎，我正在這樣做。

function MyComponent() {
  const [todoCount, setTodoCount] = useState(100);
  const [doneCount, setDoneCount] = useState(0);
  const myState = {
    todoCount,
    setTodoCount,
    doneCount,
    setDoneCount
  };

  return (
    <>
      <Text>Todo {myState.todoCount}</Text>
      <Text>Done {myState.doneCount}</Text>
    </>
  );
}

狀態設置是否有更簡潔的語法？

我失敗的嘗試是

const myState = {
  [todoCount, setTodoCount]: useState(100),
  [doneCount, setDoneCount]: useState(0);
};

Answer 1

聽起來像您可以作為自定義鈎子一部分執行的操作類型，例如

 function useMappedState(defaultState = {}) {
   const keys = Object.keys(defaultState);
   return keys.reduce((map, k) => {
     const fk = `set${k.charAt(0).toUpperCase()}${k.slice(1)}`;
     const [state, setState] = useState(defaultState[k]);
     map[k] = state;
     map[fk] = setState;
     return map;
   }, {});
 }
 ...
 const state = useMappedState({
   todoCount: 100,
   doneCount: 0
 });
 console.log(state.todoCount) // 100
 state.setTodoCount(5); // should set state of todoCount

從 理論上講 ，這應該可以為您提供所需的東西，但是我沒有經過測試，因此請謹慎使用（例如，我什至不確定是否可以在迭代器內調用鈎子）。 -這很好 。

盡管您正在做的事情實際上與useReducer已經完成的工作相似，但是值得嘗試使用該掛鈎。

Answer 2

當您需要管理復雜狀態時， useReducer是必需的。 它是一個鈎子，除了初始狀態外還接受減速器功能。 減速器由您編寫，用於將某些“動作”映射到狀態變化。 您可以將動作“分派”到reducer函數，以根據您指定的規則更新狀態。 useState本身在內部調用useReducer 。

/* action = { type: string, payload: any type } */

function reducer(state, { type, payload }) {
  switch(type) {
    case 'do-todo':
      return { doneCount: state.doneCount + 1, todoCount: state.todoCount - 1 }
    case 'undo-todo':
      return { doneCount: state.doneCount - 1, todoCount: state.todoCount + 1 }
    default:
      return state
  }
}

function App() {
  const [ state, dispatch ] = useReducer(reducer, { todoCount: 100, doneCount: 0 }) 

  return (
    <>
      <Text>Todo {state.todoCount}</Text>
      <Text>Done {state.doneCount}</Text>
      <Button onClick={() => dispatch({ type: 'do-todo' })}>Do Todo</Button>
    </>
  );
}

您可以使用多個reducer映射到多個名稱空間。