learn-co-curriculum/intro-to-redux-library-codealong

intro-to-redux-library-codealong's Issues

Curriculum

This would have been very helpful information back in Using Redux with React. It would have helped with debugging. Perhaps you can change the order.

This lab was not clear and I was unable to follow along

When following the lab, even copy and pasting from the code, my application still gave errors and was unable to run. I don't understand the information being presented.

Inconsistent incrementation of item count in lesson produces error

Issue intended for intro-to-redux-library-codealong-v-000

In the initial implementation of the reducer, shoppingListItemReducer, the first case statement returns state.items.concat(state.items.length + 1); which caused this.props.items.length in the render method of class App (/src/App.js) to return undefined.

export default function shoppingListItemReducer(
    state = {
        items: []
    },
    action
) {
    switch (action.type) {
        case 'INCREASE_COUNT':
            return state.items.concat(state.items.length + 1);
 
        default:
            return state;
    }
}

The solution to this error is in the Add Logging to Our Reducer section of this lesson which provides a different method to increment the count.

return Object.assign({}, state, {
                items: state.items.concat(state.items.length + 1)
            });

When using this code, the error disappears and all goes well. Changing the initial code to match the code further along in this code-along would save some time and avoid this error.

npm install react-redux

This codealong imports react-redux... I couldn't get it to work until I tried npm install react-redux --save (the readme mentioned using npm install react --save)

Fix grammar

This paragraph has the problem: It's in the section Step 1: Setting Up The Store
Redux provides a function, createStore(), that, when invoked, returns an instance of the Redux store for us. So we can use that method to create a store. We want to import createStore() in our src/index.js file, where ReactDOM renders our application.

Change to:
So we can use that method to create a store, we want to import createStore() in our src/index.js file, where ReactDOM renders our application.

ShoppingListItemReducer

You should fix your code so that the return is not items: state.items.concat(state.items.length + 1), but:

`` switch (action.type) {
case 'INCREASE_COUNT':
return Object.assign({}, state, {
items: state.items.concat(state.items.length + 1)
});```

If not, the code in App will not work, for this.props.items will not exist after updating state.

Provider dependency still causing issues

Students need to do the command: npm install react-redux --save
This is not stated explicitly in the readme. Please edit.

Extra ")" causing compiling to fail

After copying and pasting the updated code from the second to last code block in the lesson into shoppingListItemReducer, I get a compiler error:

Failed to compile.

./src/reducers/shoppingListItemReducer.js
Syntax error: Unexpected token, expected ; (17:4)

  15 |                  ...state,
  16 |                  items: state.items.concat(state.items.length + 1)
> 17 |           });
     |            ^
  18 |   
  19 |    default:
  20 |           console.log('Initial state.items length: %s', state.items.length);

It looks like there is an extra ) on line 17.

This should take you to the exact element on the page (line 17 in that code block)
document.querySelector("#js--region-body-content > div > div:nth-child(2) > div > div > div > div > pre:nth-child(29) > code > ol > li:nth-child(17) > span")

ShoppingListItemReducer *still* causes failure

This issue was brought up in November of 2018 and has yet to be resolved. It does appear that someone attempted to resolve the error as the return of ShoppingListItemReducer mysteriously switches halfway through the lesson without mention:

switch (action.type) {
case 'INCREASE_COUNT':
return state.items.concat(state.items.length + 1);

default:
  return state;

}

to

switch (action.type) {
case 'INCREASE_COUNT':
console.log('Current state.items length %s', state.items.length);
console.log('Updating state.items length to %s', state.items.length + 1);
return Object.assign({}, state, {
items: state.items.concat(state.items.length + 1)
});

default:
  console.log('Initial state.items length: %s', state.items.length);
  return state;

}

Note return Object.assign({}...

Unfortunately, this does not seem to be functional. The only code that works for me is:

switch (action.type) {
  case 'INCREASE_COUNT':
	return {
		...state,
		items: state.items.concat(state.items.length + 1)
		}   
  default:
	return state;
}

Redux store update doesn't trigger re-render of component

Following the lab code-along the component does not re-render when dispatching an action. I checked the solution branch and the solution branch is out of date as well and seems to point to an older version of the code-along with an array

Last code snippet incorporates react-redux Provider component without any context

Consider removing or address why react-redux Provider component was added in lab.

Same issue as #13 and #16 - ReactDOM.render Error

Solution is:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

Recreating issue to hopefully bump this, as this issue has persisted since January.

App won't render in browser with code provided in readme

Using the code the readme provides for index.js errors out with the following:

React.Children.only expected to receive a single React element child.

I had to remove line 15: {' '} to get the page to render.

Full working code:

ReactDOM.render( <Provider store={store}> {' '} <App /> </Provider>, document.getElementById('root') );

master branch contains the solution

This codealong appears to have all the code already completed in the master branch.

It always returns

"Return" should be "returns" in the sentence below:
"It always return a store (given a reducer) that will have a dispatch method and a getState method."

Thank you.

Same issue as #13 except the correct solution is this

ReactDOM.render( <Provider store={store}>
  <App />
</Provider>,
  document.getElementById('root')
);

It's key that <App /> is on its own line. See this stackoverflow for more https://stackoverflow.com/questions/36735397/react-error-failed-proptype-invalid-prop-children-supplied-to-provider-ex

handleOnClick function in ./src/App.js

The function handleOnCLick() in ./src/App.js should be an arrow function, the code does not work as it is.

mocha test wrappers just take in .first and .last instead of by name

Noticed that if you switch the order of the userinput and hometown input the tests don't pass because of lines like these:

let usernameInput = wrapper.find('input').first(); // this line just takes the first input
usernameInput.simulate('change', { target: { value: 'Bob', name: 'username' } });
let hometownInput = wrapper.find({ type: 'text' }).last(); //this line just takes the last input.

Lesson not working

Tried to open this lesson and this pulls up in IDE
// ♥ learn open intro-to-redux-library-codealong-v-000
Looking for lesson...
/usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/lessons/ios_lesson.rb:6:in detect': undefined method any?' for false:FalseClass (NoMethodError)
from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/lessons.rb:20:in block in classify' from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/lessons.rb:19:in each'
from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/lessons.rb:19:in find' from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/lessons.rb:19:in classify'
from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/opener.rb:36:in run' from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/lib/learn_open/opener.rb:11:in run'
from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-open-1.2.21/bin/learn-open:7:in <top (required)>' from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-open:23:in load'
from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-open:23:in `

'

Return's an Array Instead of an Object

Line 11 in the first "./src/reducers/shoppingListItemReducer.js" code block reads:

return state.items.concat(state.items.length + 1);

The return line should return an object instead of an array... otherwise, it throws errors. (This is fixed in later code blocks)

Props has some issues

TypeError: Cannot read property 'length' of undefined
App.render
src/App.js:14
11 | return (
12 |

13 | Click

14 |

{this.props.items.length}

15 |

16 | );
17 | }

This lab probably set to the wrong order

Go for this one first https://github.com/learn-co-students/map-state-to-props-readme-online-web-pt-092418. It should make sense. Good luck!