immerjs / immer

Create the next immutable state by mutating the current one
https://immerjs.github.io/immer/
MIT License
27.65k stars 848 forks source link

Proper Way To Get Current State With Immer ? #1134

Open chalu opened 2 months ago

chalu commented 2 months ago

🙋‍♂ Proper Way To Get Current State

What is the proper way of getting the current state with immer. Do you reassign the output of produce to the state or use something else like "current" which can be imported from the immer package?

Does reassigning not negate the immutability practice of Immer, especially if using Typescript and the state was defined as read-only to enforce immutability. This has not been clear to me from the documentation, hence the question :

import { produce } from "immer";

type AppState = {
    readonly photos: string[];
};

// should state not be read-only and declared with const?
let state: AppState = {
    cards: []
};

// get photos straight from the state at any time. 
// what's the right way??
export const getPhotos = () => state.photos;

export const addPhotos = (...recents: string[]) => {
   // re-assigning state here so we can use its latest update ??
    state = produce(state, (draft) => {
        draft.photos.push(...recents);
    });
    return state.photos;
};
markerikson commented 2 months ago

This doesn't seem like an Immer question per se.

Is this being used with React? With Redux? Some other library?

Normally Immer is used to create a new state value, but the actual value is then stored and managed in whatever state management tool is appropriate (useState / useReducer for React, createSlice for Redux, etc).

chalu commented 2 months ago

This doesn't seem like an Immer question per se.

Is this being used with React? With Redux? Some other library?

Normally Immer is used to create a new state value, but the actual value is then stored and managed in whatever state management tool is appropriate (useState / useReducer for React, createSlice for Redux, etc).

It is being used in a vanilla HTML/CSS/Typescript frontend application that wants to centralize and better manage state like in modern frontend apps.

markerikson commented 2 months ago

Immer doesn't know or care how you're "storing" the state. It's a function that calculates a new state, immutably. It's up to you to save that result somewhere, just like you would any other value you've calculated.

chalu commented 2 months ago

Immer doesn't know or care how you're "storing" the state. It's a function that calculates a new state, immutably. It's up to you to save that result somewhere, just like you would any other value you've calculated.

This clears things for me. Thanks