Comments (4)
My current solution. Think it's fine?
type Dispatch<State> = (dispatch: (draft: Draft<State>) => void | State) => State;
type ImmerStore<State> = [State, Dispatch<State>];
export function useImmer<S = any>(initialValue: S): ImmerStore<S> {
const [state, updateState] = useState<S>(initialValue);
const dispatch = (updater: (draft: Draft<S>) => void) => {
const newState = produce(updater)(castImmutable(castDraft(state))) as S;
updateState(newState);
return newState;
};
return [state, dispatch];
}
from use-immer.
I have a very similar problem.
I have a callback function, where I update Map
:
const [tagsState, updateTagsState] = useImmer(tags);
...
const onTagSelectionChanged = useCallback(
(data: any) => {
updateTagsState(draft => {
draft.set(144, { label: 'Some string' });
});
// Here I was expected chages were applied, because updateTagsState has finished
// But I see old Map instance
const tag = tagsState.get(data.id);
if (tag !== undefined && onSelectionChanged !== undefined) {
onSelectionChanged(tag);
}
},
[tagsState, updateTagsState, onSelectionChanged]
);
I think the semantic should be - to be able to observe changes immideately after finishing updateTagsState
function
from use-immer.
My current solution. Think it's fine?
type Dispatch<State> = (dispatch: (draft: Draft<State>) => void | State) => State; type ImmerStore<State> = [State, Dispatch<State>]; export function useImmer<S = any>(initialValue: S): ImmerStore<S> { const [state, updateState] = useState<S>(initialValue); const dispatch = (updater: (draft: Draft<S>) => void) => { const newState = produce(updater)(castImmutable(castDraft(state))) as S; updateState(newState); return newState; }; return [state, dispatch]; }
Yes, I think useImmer and useImmerReducer's update functions should return new state.
It might happen, that after calling callback (in my example with onSelectionChanged
callback) component will be completely rerendered externally, never having chance to update Map instance using useImmer
from use-immer.
This is basically not an immer but a react question. The to access state for executing side effects, don't trigger it directly from the rendering, but from useEffect
. For exampe:
const [tagsState, updateTagsState] = useImmer(tags);
...
const onTagSelectionChanged = useCallback(
(data: any) => {
updateTagsState(draft => {
draft.set(144, { label: 'Some string' });
});
},
[tagsState, updateTagsState, onSelectionChanged]
);
// useEffect 'sees' the state that has become the current state for the component
useEffect(() => {
const tag = tagsState.get(data.id);
if (tag !== undefined && onSelectionChanged !== undefined) {
onSelectionChanged(tag);
}
}, [tagState.get(data.id)]
from use-immer.
Related Issues (20)
- Enhance `userImmerReducer`'s type by providing function overloads HOT 4
- i have an error Immer only supports setting array indices and the 'length' property HOT 1
- Passing event directly results in strange values inside state change function while running tests HOT 4
- [QA]how to complete a use-immer with uncontrolledValue?
- [BUG] Immer Error when setting properties on a Record object HOT 5
- how to integrate redo undo ? HOT 1
- When the state is a reference type stored in an array, it cannot be obtained when modifying HOT 4
- Target ESM over CommonJS HOT 6
- 老项目使用0.7版本重新安装依赖会报错
- addition to docs HOT 1
- When using setState nesting, run log setState will execute multiple times HOT 1
- useImmerReducer cant handle initialState being null? HOT 1
- [Question] Using union type in useImmerReducer
- Incorrect immer peer dependency HOT 1
- Umd version doesn't work
- vscode auto import HOT 2
- State type is not being properly propagated to draft object in updater produce function HOT 1
- Support for useOptimistic?
- Seems like a bug in your sandbox useImmer demo?
- Wrong type for `DraftFunction`?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-immer.