Redux Crash Course With React
Why Stack Overflow recommends it
Stack Overflow users link it as the tutorial they followed to learn Redux, and many of their questions are about code from it, such as fetchPosts actions, reducers and connect().
Recommended by 5 people across 5 different months, 2018 to 2020.
What it is
A roughly hour-long Traversy Media tutorial that explains what Redux is, then builds a React app from scratch with a store, actions, reducers and thunk-based fetching of posts. The Redux implementation starts around the 22 minute mark, and it assumes the viewer already knows basic React.
What people said
Recommends Alwaysblue · 2018-07 · Stack Overflow · on “How are we able to use props when using React Redux?”
I was following a video tutorial about Redux from this [this video] . I went through the following article but I am unable to understand how can we use this.props . For example, consider this snippet of code: import React, { Component } from 'react'; import { connect } from 'react-redux' import axios from 'axios'; import { fetchPosts } from '../actions/postActions.js'; class Posts extends Component { componentWillMount() { this.props.fetchPosts(); } render() { const postItems = this.props.posts.map(el => { return ( <div key={el.id}> <h3>{el.title} </h3> <p>{el.body} </p> </div> ) }) return ( <div> <h1> Posts </h1> {postItems} </div> ); } } const mapStateToProps = state => ({ posts: state.posts.it
Recommends Vinay J Rao · 2018-09 · Stack Overflow · on “ReactJS Passing Data Between Components (search bar)”
I think the best way to solve that problem is to use Redux ( [LINK] ) which is typically used for storing the values and which you can use it throughout the application files. The below links will help you understand Redux and how to implement to your react application: [LINK] [this video] [LINK]
Recommends user3657538 · 2019-08 · Stack Overflow · on “Slowly implementing redux to an existing React.js project”
I followed instructions in: [this video] this video and managed to add it to the project. I surround entire project in provider and when I have a shared component I move it to store. I do it gradually and only for what is needed.
Recommends mpc75 · 2019-12 · Stack Overflow · on “Redux | Can't get an Axios response to dispatch to the reducer”
@Oliver apparently if you name the combine reducer file 'index.js' and put it in the ./reducers folder it will know that this is the root reducer when you import rootReducer from './reducers - I got this info from 32:00 in this youtube instructional: link [this video]
Recommends Hadi Pawar · 2020-06 · Stack Overflow · on “Table rows disappearing on going to the next page”
[this video] this should explain everything you need to know about redux. Its very important part of react so learning it would benefit you in the future.
Cites Alwaysblue · 2018-07 · Stack Overflow · on “Explanation about Action Type”
I am following this video on youtube to learn redu [this video] x Here the instructor created a reducer by doing something like this (we are calling it as a post reducer and it will merge with other reducer when we import it to rootreducer import { FETCH_POST, NEW_POST } from '../actions/type.js' const initialState = { items: [], item: {} } export default function(state = initialState, action) { switch (action.type) { default: return state } } Above import { FETCH_POST, NEW_POST } from '../actions/type.js' are action types and contains only following things export const FETCH_POST = 'FETCH_POST'; export const NEW_POST = 'NEW_POST'; Now since this is related to redux, I understand what acton does
Cites winnieTheWind · 2018-11 · Stack Overflow · on “Using spread operators for redux in react? Array mapping problems?”
I'm currently revising my understanding of redux and react. React components are working, and I have a knex database setup along with it. I have a reducer using the following syntax. import { FETCH_POSTS, NEW_POST } from '../actions/types'; const initialState = { items: [], item: {} } export default function(state = initialState, action) { switch (action.type) { case FETCH_POSTS: return { ...state, items: action.payload }; case NEW_POST: return { ...state, item: action.payload }; default: return state; } } Here is an error I get. It doesn't seem to like the spread operator. bundle.js:445 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:/work
Cites JavaDeveloper · 2019-02 · Stack Overflow · on “Why am I getting a blank screen while following React JS?”
I am following the current tutorial: [this video] I expect to see bunch of posts on my screen but my screen remains blank. It appears I have followed everything told in the tutorial. import React, { Component } from 'react'; class Posts extends Component { constructor(props) { super(props); this.state = { posts: [] } } componentWillMount() { fetch(' [LINK] ') .then(res => res.json()) .then(data => this.setState({posts: data})) } render() { const postItems = this.state.posts.map(post => ( <div key={post.id}> <h3>{post.title}</h3> <p>{post.body}</p> </div> )); return ( <div> <h1>Posts</h1> { postItems } </div> ); } } export default Posts; and import React, { Component } from 'react'; import './App.
Cites mern · 2019-06 · Stack Overflow · on “Redux/thunk Error: Actions must be plain objects. Use custom middleware for async actions”
i'm new to Redux and have followed this video [this video] to implement Redux into my MERN template, however it keeps crashing due to "Error: Actions must be plain objects. Use custom middleware for async actions." I believe the problem might be somewhere in the dispatch function but can't seem to find it. fetch file: `export function fetchPosts () { return function(dispatch) { fetch(' [LINK] ') .then(res => res.json()) .then(posts => dispatch({ type: FETCH_POSTS, payload: posts }) ); } } ` the component: class MyComponent extends React.Component { componentWillMount() { this.props.fetchPosts(); } render() { return ( <div></div> ); } }; export default connect(null, { fetchPosts })(MyComponent);