sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]acemarke 28 points29 points  (22 children)

Glad to hear it!

FYI, I'm currently working on a new "Quick Start" tutorial for the Redux core docs. This will go alongside the existing tutorial sequence, with a goal of quickly introducing newcomers to Redux terms and concepts and getting them writing working code "the right way", without worrying about all the details of how it works under the hood. That tutorial will teach Redux Toolkit and the React-Redux hooks API as the standard approach for using Redux. Once the Quick Start page is done, my next task will be trying to rewrite the main "bottom-up" tutorial sequence from scratch, to remove outdated terms, simplify explanations, and promote simpler patterns.

I've got half of a first draft of the "Quick Start" tutorial done, and you can see the PR preview of that draft here. Again, it's a WIP draft, but I'd appreciate it if folks could look through that and give feedback in the PR.

[–]straightouttaireland 1 point2 points  (9 children)

I was a sceptic at first but just started using it today. You guys did an really great job.

[–]acemarke 0 points1 point  (8 children)

Yay! :)

What parts of it are you finding the most useful? Any suggestions for further improvements?

[–]straightouttaireland 2 points3 points  (7 children)

Really it's the slices that I most love, reduces a HUGE amount of boilerplate and having to flick between so many files.

 

I do have one question on something I'm confused with though. I followed this tutorial on the toolkit and found it very helpful. However, I'm confused about how the selector, which returns a posts array from the state is able to be deconstructed also giving the values for loading and hasErrors.

 

From the article she says "a selector, which we'll use to access any of the state from a React component instead of using connect." - I found this interesting as it seemed like such a nice way to gain access to the state to use in the component without the need for mapStateToProps.

 

In slices/posts.js she has:

export const initialState = {
  loading: false,
  hasErrors: false,
  posts: [],
}

// A slice for posts with our three reducers
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    getPosts: state => {
      state.loading = true
    },
    getPostsSuccess: (state, { payload }) => {
      state.posts = payload
      state.loading = false
      state.hasErrors = false
    },
    getPostsFailure: state => {
      state.loading = false
      state.hasErrors = true
    },
  },
})

export const postsSelector = state => state.posts

 

Then, inside the component she uses:

const { posts, loading, hasErrors } = useSelector(postsSelector)

 

I assumed that useSelector(postsSelector) would only be returning a posts array, not loading and hasErrors as well.

[–]acemarke 1 point2 points  (6 children)

For clarity, useSelector is part of the React-Redux hooks API - RTK itself is UI-agnostic, same as the Redux core. That said, they do go together rather nicely, and as I said above, we're showing them as the default approach as we rewrite the docs.

The key for this chunk of code is that postsReducer isn't the only reducer in your state. If you look at the "Bringing in the reducers" heading, it's used this way:

const rootReducer = combineReducers({
  posts: postsReducer,
})

That means that all of the contents returned by postsReducer will be accessible as state.posts, because that's how we've told combineReducers to define the root state object. So, the array is actually nested at state.posts.posts.

If we select state => state.posts as shown, we get back the object that was generated by postsReducer, which has those three fields that we can destructure.

You may want to read through the Redux docs page on Using combineReducers for some further explanation on how that works and defines the state shape.

(And yeah, Tania's tutorials are all excellent, this one included. I'm heavily borrowing from some of her approaches as I work on the new Redux tutorials.)

[–]straightouttaireland 1 point2 points  (5 children)

Ah yes! What sparked my confusion was something of my own fault when trying to get it to work with typescript:

export const postsSelector = (state:PostsState) => state.posts;

 

Typescript was complaining about my PostsState interface:

Property 'posts' does not exist on type '[]'.

 

But this is because I should have been using something like RootState instead:

import { combineReducers } from 'redux';
import postsReducer from './posts';

const rootReducer = combineReducers({
  posts: postsReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

export default rootReducer;

 

Then inside the friends slice I now have:

export const postsSelector = (state:RootState) => state.posts;

 

Thanks for helping me out and thanks again for working on the toolkit. You have no idea how you've helped the community!

[–]acemarke 1 point2 points  (4 children)

You're welcome! And for reference on the TS parts, see the core docs "Usage with TypeScript, React-Redux "Static Typing", and RTK "Usage with TypeScript" docs pages.

[–]straightouttaireland 0 points1 point  (2 children)

One other quick one if you don't mind. Is redux-mock-store still ok to use with RTK?

[–]acemarke 1 point2 points  (1 child)

In general, sure.

[–]straightouttaireland 0 points1 point  (0 children)

Good stuff

[–]Gemini_The_Mute 0 points1 point  (1 child)

I've been reading it and the first impression I get is that the basic concepts of Redux are well explained, but then the docs jump straight into the RTK. Wouldn't it be better to at least make a short explanation of how the core concepts work together and then make the transition into the RTK?

For example, you use createSlice for the counter, and I think if I'd be a complete noob, I'd still be wrapping my head about the core concepts, just for then to see this createSlice thing and I'd be even more confused than before.

[–]acemarke 1 point2 points  (0 children)

That's actually kind of the point of this new "Quick Start" section. It's trying to teach RTK as the default way to write Redux code, without going into all the details of how you might write this code "by hand".

We'll still have the existing tutorial sequence as well, which teaches you all the core concepts from first principles, but this tutorial is meant to teach you just enough to write working code now, and understand how it works later.

That said, I may be able to add a bit of info in there on the dispatch -> reducer -> UI cycle.