Page Comparison

Why?

Instead of wasting time on boilerplate, you can get started immediately. The standards followed are the recommended way to write Redux logic for modern JS applications. I found that I am writing less code for core logic & can see this being utilized in any application that needs state management.

Tools:

• https://redux.js.org/ (core library, state management)

• https://immerjs.github.io/immer/ (allows you to mutate the state)

• https://github.com/reduxjs/redux-thunk (handles async actions)

• https://github.com/reduxjs/reselect (simplifies reducer functions)

Set-up:

This example will implement the configureStore(), useSelector(), & useDispatch() tools to run a simple CRUD application. We'll be running off create-react-app for this example.

...

dispatch(addPost({
  id: posts[posts.length - 1].id + 1, 
  title: 'Testing', 
  content: 'woo haa'
}))

CreateAsyncThunk:

Summary

With Redux-toolkit we’re able to rid ourselves from having complex store configurations & unnecessary files following boilerplate. I’m planning to add more to this. Highly recommend reading through the Redux-toolkit docs for full comprehension.

...