redux-react-guide/

[utterances-bot]

Redux Tutorial: An Overview and Walkthrough with React + Redux Toolkit | Tania Rascia

Do you have experience using React? Have you heard of Redux, but you've put off learning it because it looks very complicated and all the…

https://www.taniarascia.com/redux-react-guide/

[ClodoaldoDantas]

The best article about redux! Congrats 😀

[Ginkooo]

Hi! Awesome tutorial, thanks for that :) One thing that was a little problematic for me is that it's not mentioned that we should also include slices/index.js file with content like:

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

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

It didn't work without it in my case. Or maybe I'm doing something wrong?

Without it it wouldn't import rootReducer in some previous line:

import rootReducer from './slices'

[sbalaji6]

Wonderful tutorial. Thank you.

[bambie1]

THANK YOU!

[mcjlnrtwcz]

Also, adding to what @Ginkooo, said this line

import rootReducer from './slices'

in index.js is not highlighted - I've missed it on the first go

Anyways, thank you for awesome job on explaining Redux. 💖

[yashodharanawaka]

Thank you for this awesome article! 😍✨

[samantrader]

hi
in code you define

const PostsPage = ({dispatch, loading, posts, hasErrors}) => {

and dispatch Where did it come from?

[vancouver29]

HI Tania,

thank you for the Great Tutorial. i followed your steps until the last step "The end". There is an Error

Error: DashboardPage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I tried to debug it, but can't find out what wrong with my code is. I also comepare my code with your code, they are similiar.. Do you have any hints for me ? Thank you in Advance

PostsPage.js

import React, { useEffect } from "react";
import { connect } from "react-redux";

// Bring in the asynchronous fetchPost action
import { fetchPosts } from "../actions/postsActions";
import { Post } from "../components/Post";

// Redux state is now in the props of the component
const PostsPage = ({ dispatch, loading, posts, hasErrors }) => {
  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]); // effect will be skipped if dispatch hasnt changed between re-renders

  // Showing loading, error, or success state
  const renderPosts = () => {
    if (loading) return <p>Loading posts ...</p>;
    if (hasErrors) return <p>Unable to display posts.</p>;
    return posts.map((post) => <Post key={post.id} post={post} excerpt />);
  };

  return (
    <section>
      <h1>Posts</h1>
      {renderPosts()}
    </section>
  );
};

// Map Redux state to React component props
const mapStateToProps = (state) => ({
  loading: state.posts.loading,
  posts: state.posts.posts,
  hasErrors: state.posts.hasErrors,
});

// Connect Redux to React
export default connect(mapStateToProps)(PostsPage);

[vancouver29]

Samantrader ! dispatch is a method available on the store object that accepts an object which is used to update the Redux state.

[adhinarayananperumal]

There is no proper document for redux , your project ha good stuff , your project also don't give a clarity one need to understand . Any way i will master it and provide one that may be use full to many developers

[94langfly]

Great Tutorial ^O^)/

[kpennell]

This is a truly excellent tutorial.

[miteshkamat27]

Great writeup Tania!!

As suggested above by few we need to have slices/index.js with below content import { combineReducers } from "@reduxjs/toolkit"; //instead of "redux"

import postsReducer from "./posts";

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

export default rootReducer;

Finally keep up this good work !! cheers

[GarpLeHero]

Very very useful !!!!

[KonradCichoszewski]

Your writing style is so organized and understandable. I love reading your articles! Thank you very much for this one :)

[SamuelOkoroShow]

Redux in 2020. Hella late to the party.

[adetobaadedeji]

This is the best article I've read so far on Redux. The explanations were in details and were so easy to understand. I've always enjoy your articles but this it lit. Thanks so much for putting this out here. Now I'm feeling confident about Redux. Smiles

[deepmeena70]

I am your fan ma'am....you bring complexity to NULL Thank you for posting such useful blogs to us 😊😊😊

[akshat-alphonso]

Not able to get why 'excerpt' is being passed down to Post component. Can someone please help explain?

[Shaikh321afsar]

thank you for this tutorial mam i am getting this error after i create my create appcreate-react-app starting error - Error: No valid exports main found for '\node_modules\colorette' some please help me to fix this error i am actually trying npm uninstall -g create-react-app and after i do npx create-react-app redux-tutorial i am getting error

[siva-thanigaimalai07]

I have tried lot of videos and articles, but useless all those efforts. Finally I got it from your article. Thank you so much dear💖

[LeVanQuang-3112]

thanks so much

[chr2099]

Thanks！ the code is clean and tidy

[kelbyhawn]

Thanks Tania, this was really helpful! 😄

I've adapted the React Redux Toolkit Application to work with React Router v6: https://codesandbox.io/s/redux-toolkit-tutorial-ppwis

[ShahabuddinAnsari]

What is 'excerpt' which is passed into Post, can someone please explain.

[buddhagrg]

why 'excerpt' is passed into "Post.js" ? because: "Post.js" is component for both "SinglePostPage.js" and "PostsPage.js". So, excerpt act like boolean in this scenario, as "excerpt" is passed to "Post.js" component from "PostsPage.js" but not from "SinglePostPage.js".

[DAVIDSAMIRCIOCOIU]

Amazing work Tania, this has been really useful! Thanks so much for publishing the article! :D

[MohtashimAli85]

I really like this article about redux. Kindly also write a article of redux with redux saga.