learn-co-curriculum / intro-to-redux-library-codealong Goto Github PK
View Code? Open in Web Editor NEWLicense: Other
License: Other
This codealong appears to have all the code already completed in the master branch.
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;
}
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" 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.
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")
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.
TypeError: Cannot read property 'length' of undefined
App.render
src/App.js:14
11 | return (
12 |
14 |
{this.props.items.length}
15 |
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.
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
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 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.
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)
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.
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
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.
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
)
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!
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.
The function handleOnCLick() in ./src/App.js should be an arrow function, the code does not work as it is.
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') );
Consider removing or address why react-redux Provider component was added in lab.
Students need to do the command: npm install react-redux --save
This is not stated explicitly in the readme. Please edit.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.