디자인 패턴 반응: 상태 감소기

Pour ceux qui connaisse Redux, c'est le même principe, on a une action, un dispatch et un reduceur.

응용 프로그램 디자인 패턴을 꽃병에 붓고 Hook useReducer 등을 사용하여 3eme 인수 뒤 Hook에 따라 꽃병에 붓습니다. Ce 3eme argument permet d'initier le state à partir d'une props.
const [state, dispatch] = useReducer(reducer, initialArg, init);
Pour ceux qui ne connaissent pas il y a 3 point clés:

1/Un object js appelé "Action":
const monAction = { type: 'add', payload: 3}
C'est un objet javascript (tout simplement), qui va contenir par convention (issus de redux) deux propriétés:

유형: généralement un string et est obligatoire.

paylod: ce qu'on veut et est facultatif.

2/디스패처 : dispatch()

C'est une function qui nous est donnée par le Hook useReducer.
Cette fonction va permet d'envoyer une action dans le reducer.
dispatch({type: 'add', payload: 3})}
3/리듀서: reducer()

Le reducer, c'est une fonction qu'on doit être définis et qui va nous servir à modifier le state.
Dans mon example, je m'assure de retourner à chaque fois une nouvelle copy du state (redux).

Cette fonction prend en 1er argument le state et en 2eme argument notre famous action.
Le reducer, c'est tout simplement un switch qu'on va faire matcher avec notre action.type et on créer un nouveau state à partir de celui qu'on a passé en paramètre.

짜잔 :)

구현:

1단계: 상태 초기화

va initialiser notre state에 시작자를 붓습니다.useReducer(reducer, propsToInit, init);
useReducer va utiliser la variable propsToInit et va la faire passer dans la fonction init

2단계: 조건 초기화

const init = (initState) => {

  if (initState === null) return { ...defaultState };

  return { count: initState };
};

Notre function init est appelé une seul fois au montage du component. Elle va retourner notre state.

3단계: 디스패치 활용

useReducer 함수는 디스패치 함수를 반환합니다.const [state, dispatch] = useReducer(reducer, propsToInit, init);
Cette fonction va nous permettre de mettre à jours le state, en utilisant une action.

4단계: 행동의 정의:
const actionAdd = {
type: "add"
};
Rien de compliqué ici, on déclare une constante pour stocker notre action.

5단계: Mise à jour du state

Ensuite cette action passe dans le reducer, et on modifie le state.

6단계: 소속

Le component s'update et la nouvelle valeur s'affiche.