Zustand와 Redux는 개념적으로 유사하며 둘 다 상태를 불변으로 관리합니다. 그러나 Redux를 사용할 때는(Context Provider)로 감싸야 합니다. 반면에, Zustand는 이러한 컨텍스트 제공자가 필요 없습니다.

즉, Zustand를 사용하면 설정이 더 간단합니다.

Redux와 Zustand 코드 비교

Redux

1. 스토어 설정:

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);
export default store;

1. 컴포넌트에서 사용:

// App.js
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import store from './store';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increase</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrease</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Zustand

1. 스토어 설정:

// store.js
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increaseCount: () => set((state) => ({ count: state.count + 1 })),
  decreaseCount: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

1. 컴포넌트에서 사용:

// App.js
import React from 'react';
import useStore from './store';

function Counter() {
  const count = useStore((state) => state.count);
  const increaseCount = useStore((state)
  
 function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;