Notes from Dan Abramov's Idiomatic Redux course on egghead.io

egghead.io_idiomatic_redux_course_notes's People

Contributors

Stargazers

Watchers

Forkers

mystk sadjow joelhooks scootcho aitoroses nathanbellette sean-johnson havef phonbopit guigrpa unbug brandonhuang glongh flexlee sangfo joenophoto qaiser110 bruceharris pixelisart bensonnjonjo albertsid harunpehlivan gkats ickyrr davidcp90 pages-alex-alex2006hw ptica xiaoxiaosaohuo sergeymaas bob-lee dmoralestech segmentationfaulter rocksteel birendra-90 kairatz masoodusmani yayalice szha82 yskang gokulraj-ece vinodronold unlimiworks vivekimsit xvonabur plugn przemyslawhaptas zainfathoni sutikshan ankit-github janzheng ezat123 barbagrigia pedromartinez11 abhsinh2 lif3ng rachnaban vibecode flipjs deenjohn karademada le-qi bernard-leech gua-naiko-che haversham94 tawsifalam ashwins93 seanhamlet moofx godefroyclair pratheekbhandary hrolick-git anhvut anybus lukewrites iammai lowjon kothagundlahari paulo-sorrentino razvancpop ansonchen direkshan-digital iwswswsw hydrosquall minhski hoilzz azarual pavankumar-patil illeandrei senpl ankitprakashcse jalelgaming asadaziz95 binario200 lmilliken bitflower prajavk androks1 asheq harendranathv hhy5277

egghead.io_idiomatic_redux_course_notes's Issues

Outdated explanations due to changes starting in React Router 4.0.0

Hi,

I'm following the course right now and I found a problem in lesson 5 "Adding React Router to the project". After making the changes to introduce Router and Route, I was getting this error:

_this.props.history is undefined

After searching a bit, I found this answer explaining that there has been a change starting in React Router 4.0.0, and that we should use BrowserRouter from react-router-dom, instead of Router from react-router. I have tried this solution and the app works as expected. Here is the fixed code:


import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import App from './App';
import { BrowserRouter, Route } from 'react-router-dom'

const Root = ({ store }) => (
    <Provider store={store}>
        <BrowserRouter>
            <Route path="/" component={App} />
        </BrowserRouter>
    </Provider>
);

Do you think we should add this information to the notes? Or at list explain that we should use a previous version of react-router for it to work as in the video?

VisibleTodoList.js:77 Uncaught TypeError: Cannot read property 'filter' of undefined

did you ever run into an issue with { params } in VisibleTodoList.js?

const mapStateToProps = (state, { params }) => {
  console.log('{ params }', { params });
  console.log('params', params);
  console.log('params.filter', params.filter);
  const filter = params.filter || 'all';
  return {
    todos: getVisibleTodos(state, filter),
    filter,
  };
};

I keep getting the following error and assume that the first one is related to the second:
error1:

warning.js:36 Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.printWarning @ warning.js:36warning @ warning.js:60beginLifeCycleTimer @ ReactDebugTool.js:123onBeginLifeCycleTimer @ ReactDebugTool.js:234invokeComponentDidMountWithTimer @ ReactCompositeComponent.js:58notifyAll @ CallbackQueue.js:67close @ ReactReconcileTransaction.js:81closeAll @ Transaction.js:204perform @ Transaction.js:146batchedMountComponentIntoNode @ ReactMount.js:127perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402render @ ReactMount.js:423(anonymous function) @ index.js:23(anonymous function) @ bundle.js:47__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:40(anonymous function) @ bundle.js:43

error 2

VisibleTodoList.js:77 Uncaught TypeError: Cannot read property 'filter' of undefined

I figure it's something really stupid but can't find it for the life of me. The console.logs above give me the following...

console.log('{ params }', { params });

{ params } > Object {params: undefined}
    params: undefined
    >__proto__: Object

console.log('params', params);

params undefined

console.log('params.filter', params.filter);

warning.js:36 Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.printWarning @ warning.js:36warning @ warning.js:60beginLifeCycleTimer @ ReactDebugTool.js:123onBeginLifeCycleTimer @ ReactDebugTool.js:234invokeComponentDidMountWithTimer @ ReactCompositeComponent.js:58notifyAll @ CallbackQueue.js:67close @ ReactReconcileTransaction.js:81closeAll @ Transaction.js:204perform @ Transaction.js:146batchedMountComponentIntoNode @ ReactMount.js:127perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402render @ ReactMount.js:423(anonymous function) @ index.js:23(anonymous function) @ bundle.js:47__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:40(anonymous function) @ bundle.js:43
VisibleTodoList.js:79 Uncaught TypeError: Cannot read property 'filter' of undefined

someone referenced this todo app in an issue that was created over in the React repository which gaearon said it'd be fixed in the next release, but that doesn't help at the moment...

08-Using_withRouter_to_Inject (mapStateToProps using react-route v4)

08-Using_withRouter_to_Inject_the_Params_into_Connected_Components.md

`VisibleTodoList.js` After (react-router v4.0.0 or superior)

const mapStateToProps = (state, withRouterParams) => ({
    todos: getVisibleTodos(
        state.todos,
        withRouterParams.match.params.filter || 'all'),
});

is the complete code available for each lesson

is the complete code available for each lesson in seperate folders

Normalizr `arrayOf` should pass a object instead of string

In https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes/blob/master/26-Normalizing_API_Responses_with_normalizr.md the arrayOfTodos uses a string, but it should use the todo object instead otherwise normalizr will throw a error. (Uncaught Error: ArraySchema requires item schema to be an object.)

Great repository btw.. 👍

Is there an potential bug with the Reducers in Section 26

In 26. Normalizing API Responses with normalizer

The byId Reducer goes from

switch (action.type) {
    case 'FETCH_TODOS_SUCCESS': // eslint-disable-line no-case-declarations
      const nextState = { ...state };
      action.response.forEach(todo => {
        nextState[todo.id] = todo;
      });
      return nextState;
    case 'ADD_TODO_SUCCESS':
      return {
        ...state,
        [action.response.id]: action.response,
      };
    default:
      return state;
  }
};

const byId = (state = {}, action) => {
  if (action.response) {
    return {
      ...state,
      ...action.response.entities.todos,
    };
  }
  return state;
};

However my understanding is that ALL the actions are taken thru ALL the reducers.

So by removing the check for Action Type of 'FETCH_TODOS_SUCCESS' and 'ADD_TODO_SUCCESS' and simply checking if the action contains a response field, then I'm thinking, that what if our system has some other unrelated action that also returns a promise with a response field, and so in that scenario, our byId Reducer would also attempt to handle this unrelated action, which would be a bug.

Am I correct here, or have I missed something?

Large refactoring between the Lesson 30 of part 1 and part 2

There appears to have been a large refactoring of the code between the last lesson of part 1 and the start of part 2. Everything has been split out into separate files and switched to using npm rather than importing all the code directly.

It means anyone who hasn't paid for the course has a harder time following along. Not that this is a major issue, but worth mentioning for the community notes, that is you can't expect just to pick up exactly where the previous course left off.

tayiorbeii / egghead.io_idiomatic_redux_course_notes Goto Github PK

egghead.io_idiomatic_redux_course_notes's People

Contributors

Stargazers

Watchers

Forkers

egghead.io_idiomatic_redux_course_notes's Issues

Outdated explanations due to changes starting in React Router 4.0.0

VisibleTodoList.js:77 Uncaught TypeError: Cannot read property 'filter' of undefined

08-Using_withRouter_to_Inject (mapStateToProps using react-route v4)

`VisibleTodoList.js` After (react-router v4.0.0 or superior)

is the complete code available for each lesson

Normalizr `arrayOf` should pass a object instead of string

Is there an potential bug with the Reducers in Section 26

Large refactoring between the Lesson 30 of part 1 and part 2

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

tayiorbeii / egghead.io_idiomatic_redux_course_notes Goto Github PK

egghead.io_idiomatic_redux_course_notes's People

Contributors

Stargazers

Watchers

Forkers

egghead.io_idiomatic_redux_course_notes's Issues

VisibleTodoList.js After (react-router v4.0.0 or superior)

Recommend Projects

Recommend Topics

Recommend Org

`VisibleTodoList.js` After (react-router v4.0.0 or superior)