Zustand是什麼？React前端狀態管理

關於狀態管理

• useState
• useReducer

• useContext

• Redux
• Mobx
• Zustand

Zustand 是什麼？

Zustand用法

建立第一個Store

import create from 'zustand'
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

針對元件進行綁定

function BearCounter() {
　　const bears = useBearStore((state) => state.bears)
　　return <h1>{bears} around here ...</h1>
}
function Controls() {
　　const increasePopulation = useBearStore((state) => state.increasePopulation)
　　return <button onClick={increasePopulation}>one up</button>
}

Zustand TypeScript 寫法

import create from "zustand"
type Product = { sku: string; name: string; image: string }
type CartState = {
　　products: Product[]
　　cart: { [sku: string]: number }
　　addToCart: (sku: string) => void
　　removeFromCart: (sku: string) => void
}
// Selectors
// ...
// Initialize our store with initial values and actions to mutate the state
export const useCart = create<CartState>(set => ({
products: [
// ...
],
cart: {},
// Actions
// ...
}))

Redux TypeScript 寫法

import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit"
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
// Slices
// Definee the shape of the state and how to mutate it
type ICart = { [sku: string]: number }
const cartInitialState: ICart = {}
const cartSlice = createSlice({
　　name: "cart",
　　initialState: cartInitialState,
　　reducers: {
　　// ...
　　},
})
type IProduct = { sku: string; name: string; image: string }
const productsInitialState: IProduct[] = [
　　// ...
]
const productsSlice = createSlice({
　　name: "products",
　　initialState: productsInitialState,
　　reducers: {},
})
// Actions
// ...
// Selectors
// ...
// Store
export const store = configureStore({
　　reducer: {
　　cart: cartSlice.reducer,
　　products: productsSlice.reducer,
　　},
})
// ...
const App = () => {
return (
　　<Provider store={store}>
　　<NavigationContainer>
　　<Stack.Navigator>{/* ... */}</Stack.Navigator>
　　<StatusBar style="auto" />
　　</NavigationContainer>
　　</Provider>
　　)
}

Mobx TypeScript寫法

import { types, Instance } from "mobx-state-tree"
const Product = types.model({
  sku: types.string,
  name: types.string,
  image: types.string,
})
// Model and type our data with mobx state tree
const CartStore = types
  .model("CartStore", {
    products: types.array(Product),
    cart: types.map(types.number),
  })
  // Actions to mutate the state
  .actions(store => ({
    // ...
  }))
  // Views are like selectors
  .views(self => ({
    // ...
  }))
type CartStoreType = Instance<typeof CartStore>
// Spin up a hook to use our store and provide initial values to it
let _cartStore: CartStoreType
export const useCart = () => {
  if (!_cartStore) {
    _cartStore = CartStore.create({
      products: [
        // ...
      ],
      cart: {},
    })
  }
  return _cartStore
}

Zustand是否能超越Context以及Redux呢？

Redux

Context

結論