How to set object key in state using zustand

When developing React applications with Zustand, we frequently need to manage object-type states. Updating specific keys within objects requires modifying the state to ensure maintainability and performance optimization.

1. Defining Initial State and State Update Methods

First, we need to define the initial state in the Zustand store. Suppose we have a state object user containing multiple keys such as name and age. We use Zustand's create method to set up the store:

javascript
import create from 'zustand';

const useStore = create(set => ({
  user: { name: 'Zhang San', age: 30 },
  setUser: (key, value) => set(state => ({
    user: { ...state.user, [key]: value }
  }))
}));

In this example, we define a setUser method in the store that accepts two parameters: key is the key we want to update, and value is the new value. Internally, the method uses the set function to update the state. The set function accepts a function whose parameter is the current state and returns a new state object.

2. Using State and Update Functions in Components

Next, in a React component, we utilize this store to access and update the state:

javascript
import React from 'react';
import useStore from './store';

function UserProfile() {
  const { user, setUser } = useStore();

  const handleNameChange = (event) => {
    setUser('name', event.target.value);
  };

  const handleAgeChange = (event) => {
    setUser('age', parseInt(event.target.value, 10));
  };

  return (
    <div>
      <input
        value={user.name}
        onChange={handleNameChange}
      />
      <input
        type="number"
        value={user.age}
        onChange={handleAgeChange}
      />
    </div>
  );
}

In the UserProfile component, we obtain the user object and setUser method via the useStore hook. The interface includes two input elements for modifying the user's name and age. The onChange handlers for the input fields call the setUser method to update the state.

Practical Application Example

In real projects, such as a user profile settings page in the user center, we can allow users to update their name, age, email, and other information. By using the above approach, we can create a form that enables users to input new values and update the state storage in real-time via the setUser method, resulting in a responsive and user-friendly interface.

Summary

By using Zustand to manage the state in React applications, especially object-type states, state updates become more intuitive and easier to manage. Leveraging Zustand's concise API, we can efficiently implement state reading and updating, ensuring application performance and user experience.