Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proper Way To Get Current State With Immer ? #1134

Open
chalu opened this issue Jul 23, 2024 · 4 comments
Open

Proper Way To Get Current State With Immer ? #1134

chalu opened this issue Jul 23, 2024 · 4 comments
Labels

Comments

@chalu
Copy link

chalu commented Jul 23, 2024

🙋‍♂ 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;
};
@chalu chalu added the question label Jul 23, 2024
@markerikson
Copy link
Contributor

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
Copy link
Author

chalu commented Jul 24, 2024

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
Copy link
Contributor

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
Copy link
Author

chalu commented Jul 25, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants