React

State Management

Mer sofistikerad

Från React Hook useReducer

=> Redux Toolkit

DEL 1

State management med React

  • Det finns två interna Hooks som används för state management i funktionella komponenter: useState och useReducer
     
  • useReducer är till för "mer komplex" state management och ersätter useState i en sådan användning.
     
  • Koceptet kring useReducer blev populärt i och med utvecklingen och användnigen av Redux - eftersom det bygger på samma "reducer"-koncept
     
  • Målet är att lära oss Redux Toolkit (en "enklare" variant av Redux) och använda för att hantera olika stated
     
  • Hur börjar vi vår resa? Vi lär oss först konceptet reducer genom att använda useReducer och tar sedan med oss den kunskapen när vi går vidare till Redux Toolkit!

useReducer

och konceptet kring det

Men först...

  • useState är mer för "state transitions" och useReducer är för "state manipulations"
  • När vi har flera olika states och dessa states är nära relaterade till varandra.
  • När kommande state-värde beror av tidigare state-värdem

När useReducer?

Ersätter useState för de states som behandlas med useReducer

Vad är en reducer?

https://beta.reactjs.org/reference/react/useReducer

(state, action) => newState

En reducer är en funktion som tar två argument, nuvarande state och en action (vad som ska ske) och returnerar ett nytt state utifrån det.

useState vs. useReducer

    const [input, setInput] = useState("")
    const [todos, setTodos] = useState([])
const [state, dispatch] = useReducer(reducer, {todos: [], input: ""})

STATE VARIABLER

FUNKTIONER FÖR ATT FÖRÄNDRA STATE

INITIALA VÄRDEN FÖR VARJE STATE

Ett objekt som innehåller hela state för komponenten!

ersätter useState för de states som berörs

Reducer

(switch är konvention, men fungerar precis samma som if/else)

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD":
      {
          // Logic to add a todo to todolist
      };
    case "EDIT":
      {
         // Logic to edit a todo in todolist
      };
    case "DELETE":
     {
         // Logic to remove a todo from todolist
      };
    default:
      return state;
  }
};

uppdaterar state genom nuvarande state och action

Vad gör dispatch?

När vi modifierar state använder vi dispatch. Den funktionen måste alltid ha en action associerad. Om man vill skicka med extra information använder man payload. Namnen "type" och "payload" är konventioner om hur useReducers brukar användas.

 

  const handleSubmit = (event) => {
        event.preventDefault();
        
        dispatch({
            type: "ADD",
            payload: input
        })
        
       
    }
const reducer = (state, action) => {
  switch (action.type) {
    case "ADD":
      {
        return {
        ...state,
        todos: [...state.todos, action.payload]
     };
    
    case "EDIT":
      {
         // Logic to edit a todo in todolist
      };
    case "DELETE":
     {
         // Logic to remove a todo from todolist
      };
    default:
      return state;
  }
};

I reducern...

"Each “action” should not mutate the state. We should always return new state based on previous one" => se länk

Tips!

  • Försök att hålla logiken i reducerna och håll dispatch så enkla som möjligt. Detta leder till mindre kod om man har samma action som dispatchas på flera ställen

  • Tanken med reducers är att ha tydliga sätt hur state kan ändras!


Code-along useReducer

Applicerad på en Counter (increment, decrement, addValue)

https://codesandbox.io/s/jovial-benz-d7g5ft?file=/src/components/Counter.jsx

Avancerad State Management Del 1

By sandra-larsson

Avancerad State Management Del 1

  • 64

More from sandra-larsson