리액터 사용에 대한 간단한 가이드.

반응 앱의 상태 관리를 위해 useState를 사용하고 있었습니다. 한 번의 클릭으로 3개 이상의 상태를 관리해야 할 때까지는 모든 것이 괜찮았습니다. 때로는 상태에 여러 작업이 필요하여 훨씬 더 복잡해졌습니다.

useReducer가 정확히 무엇입니까?

useReducer는 여러 하위 값을 포함하는 상태가 복잡해질 때 useState의 대안으로 상태를 관리하는 데 사용됩니다.

저는 3개 이상의 상태가 있는 경우 useReducer를 사용하여 모든 상태 변경을 한 곳에서 관리하는 것을 선호합니다.


전제 조건:

스위치 문,
확산 연산자,
useState.

어떻게 작동합니까?

먼저 JavaScript에서 reduce가 어떻게 작동하는지 살펴보겠습니다.
reduce 함수는 배열을 받아 단일 값을 반환하는 reducer 함수를 실행합니다. 여기서 우리는 배열의 홀수와 짝수를 더하기 위해 reduce function + spread 연산자를 사용했습니다.

const reducer = (accumulator, currentValue) => 
{
return currentValue%2===0?
{...accumulator,even:accumulator.even+currentValue}:
{...accumulator,odd:accumulator.odd+currentValue}
}

[3, 4, 7, 8].reduce(reducer,{odd:0,even:0})

스프레드 연산자를 사용하여 이전 값을 얻습니다.{...accumulator} 개체의.

그런 다음 현재 값이 홀수인지 짝수인지에 따라 개체를 조작합니다.
{even:accumulator.even+currentValue} . 여기서 accumulator.even ->은 이전에 accumulator 객체에 저장된 짝수 값이고 currentVaulue는 reduce 함수를 통해 전달되는 배열의 현재 항목입니다.
리듀서 함수는 하나의 값을 반환합니다. {odd:10,even:20}

useReducer 초기화

const [state,dispatch]=useReducer(reducerFunction,stateVariables)

React에서 useReducer는 기본적으로 감속기 기능을 허용합니다.
구성 요소를 바인딩할 수 있는 상태 개체와 작업을 보낼 디스패치 함수를 반환합니다.

상태 변수:

상태 변수는 이를 조작하기 위해 생성하는 데이터입니다.

예를 들어 useState에서 값을 직접 전달합니다.

value=0
const [oddSum,setOddSum]=useState(value)
const [evenSum,setEvenSum]=useState(value)

감속기에서 우리는 먼저 객체를 생성합니다

const stateVariables={
value:0
}

상태 변수의 값은 감속기 기능의 도움으로 조작됩니다.

흡진기 기능:

reducerFunction은 state와 action이라는 두 가지 매개변수를 받아들입니다.
상태는 우리가 조작할 데이터{useReducer를 생성하는 동안 생성한 stateVariable}입니다.
함수는 디스패치 함수가 전달된 구성 요소에서 작업을 받습니다.

function reducerFunction(state,action){
////
}

구성 요소에 함수를 전달합니다.

구성 요소의 디스패치 함수에서 "유형"및 "페이로드"값을 전달합니다.

가능한 조치는 디스패치 함수 내에서 전달되는 "유형"에 의해 결정됩니다.

그리고 특정 값/정보/데이터/객체는 페이로드를 통해 전달되고 stateVariables를 조작하는 데 사용됩니다.

예를 들어

<button onClick=()=>dispatch({type:"incrementHandler",payload:10})>
Increment by 10
</button>

<button onClick=()=>dispatch({type:"decrementHandler",payload:10})>
Decrement by 10
</button>

<button onClick=()=>dispatch({type:"reset"})>
Reset</button>

Afterall reducer 함수는 기본적으로 컨텍스트가 수행할 수 있는 모든 가능한 작업을 정의하고 해당 작업과 관련된 전역 상태의 일부만 업데이트하는 switch 문입니다.

예를 들어 :

  function reducerFunction(state,action){
    switch(action.type){
      case "incrementHandler" :
        return {...state,value:state.value+action.payload}
    case "decrementHandler" :
        return {...state,value:state.value-action.payload}
    case "reset":
        return {...state,value:0}
  default:
       return {...state}

    }  
  }

여기:return {...state,value:state.value+action.payload}스프레드 연산자를 사용하여 이전을 검색하고 있습니다.
상태 개체의 값을 변경하고 "값"에 새 값을 할당합니다.

state.value는 이전 상태의 값을 가져오고 action.payload와 함께 추가합니다.

즉, type: "increment"및 "decrement"에 대한 action.payload는 10이므로 내가
증분 클릭: 값 =0+10=10
증분 클릭: 값= 10+10=20
감소 클릭: 값= 20-10=10
재설정 클릭: 값=0
등.

코드 스니펫 .

import { useReducer } from "react";
export default function App() {
  function reducerFunction(state, action) {
    switch (action.type) {
      case "incrementHandler":
        return { ...state, value: state.value + action.payload };
      case "decrementHandler":
        return { ...state, value: state.value - action.payload };
      case "reset":
        return { ...state, value: 0 };
      default:
        return { ...state };
    }
  }

  const stateVariables = {
    value: 0
  };
  const [state, dispatch] = useReducer(reducerFunction, stateVariables);

  return (
    <div className="App">
      <button
        onClick={() => dispatch({ type: "incrementHandler", payload: 10 })}
      >
        Increment by 10
      </button>
      <button
        onClick={() => dispatch({ type: "decrementHandler", payload: 10 })}
      >
        Decrement by 10
      </button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <div>{state.value}</div>
    </div>
  );
}