React Redux Toolkit Tips: Difference between revisions

From bibbleWiki
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;