React Redux Toolkit Tips: Difference between revisions
Jump to navigation
Jump to search
Line 7: | Line 7: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
We can use | We can use | ||
<syntaxhighlight lang="js"> | |||
// In the component | |||
const posts = useSelector(selectAllPosts) | |||
// In the Slice | |||
export const selectAllPosts = (state) => state.posts; | |||
</syntaxhighlight> | |||
=Tip 1 Prepared Callback= | |||
We started with this where we pass an object in the action | |||
<syntaxhighlight lang="js" highlight="5-7"> | |||
const postsSlice = createSlice({ | |||
name: 'posts', | |||
initialstate, | |||
reducers: { | |||
postAdded(state, action) { | |||
state.push(action.payload) | |||
} | |||
} | |||
}) | |||
</syntaxhighlight> | |||
We can provide a prepare | |||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
// In the component | // In the component |
Revision as of 03:56, 31 December 2022
Introduction
Taken from YouTube https://www.youtube.com/watch?v=NqzdVN2tyvQ
Tip 1 Probably should know this
Instead of using
const posts = useSelector((state) => state.posts);
We can use
// In the component
const posts = useSelector(selectAllPosts)
// In the Slice
export const selectAllPosts = (state) => state.posts;
Tip 1 Prepared Callback
We started with this where we pass an object in the action
const postsSlice = createSlice({
name: 'posts',
initialstate,
reducers: {
postAdded(state, action) {
state.push(action.payload)
}
}
})
We can provide a prepare
// In the component
const posts = useSelector(selectAllPosts)
// In the Slice
export const selectAllPosts = (state) => state.posts;