Fibonacci-Counter implemented with React-Redux
up vote
0
down vote
favorite
After learning the basics of React-Redux I've made an app to familiarize myself more with the concepts. It's a counter which counts-up the Fibonacci-Number.
Here's my code:
// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);Is my implementation of the concepts correct and done in a good way and fashion? What shall / must I change and why?
Looking forward to reading your answers and comments.
javascript react.js redux
asked Dec 10 at 17:00
michael.zech
1,7141433
add a comment |
up vote
0
down vote
favorite
After learning the basics of React-Redux I've made an app to familiarize myself more with the concepts. It's a counter which counts-up the Fibonacci-Number.
Here's my code:
// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);Is my implementation of the concepts correct and done in a good way and fashion? What shall / must I change and why?
Looking forward to reading your answers and comments.
javascript react.js redux
asked Dec 10 at 17:00
michael.zech
1,7141433
There is nothing wrong at all with the source. Couple of small things - 1) String literals -<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span>2)return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1};can be justreturn {last: state.current, current: currentCopy + lastCopy, index: state.index + 1};as we completely modifying the previous state.
– yadav_vi
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
That's alright, maybe you can adddecrementand some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep myContainers(mapStateToProps,mapDispatchToProps) andReducersin a separate file altogether. (Since this is a small project, this is perfectly fine).
– yadav_vi
12 hours ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
After learning the basics of React-Redux I've made an app to familiarize myself more with the concepts. It's a counter which counts-up the Fibonacci-Number.
Here's my code:
// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);Is my implementation of the concepts correct and done in a good way and fashion? What shall / must I change and why?
Looking forward to reading your answers and comments.
javascript react.js redux
asked Dec 10 at 17:00
michael.zech
1,7141433
After learning the basics of React-Redux I've made an app to familiarize myself more with the concepts. It's a counter which counts-up the Fibonacci-Number.
Here's my code:
// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);Is my implementation of the concepts correct and done in a good way and fashion? What shall / must I change and why?
Looking forward to reading your answers and comments.
// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// -- index.js -----------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// ---- App.js -------------------------------------------
import React, { Component } from 'react';
import { Provider } from "react-redux";
import { createStore } from "redux";
import FibonacciCounter from "./FibonacciCounter";
import './App.css';
const init = {
index: 1,
last: 1,
current: 1
}
const reducer = (state = init, action) => {
switch (action.type) {
case "NEXT":
const lastCopy = state.last;
const currentCopy = state.current;
return {
...state,
last: state.current,
current: currentCopy + lastCopy,
index: state.index + 1
};
default:
return state;
}
}
const store = createStore(reducer);
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="wrap">
<FibonacciCounter />
</div>
</Provider>
);
}
}
export default App;// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);// -------- FibonacciCounter.js -------------------------------------
import React, { Component } from 'react';
import { connect } from "react-redux";
class FibonacciCounter extends Component {
render() {
return (
<div>
<div className="display">
<span>{("00" + this.props.index).slice(-3)}. Fibonacci Number: </span>
<span className="current-number">{this.props.current}</span>
</div>
<div className="navi">
<a href="#" className="ghost-button" onClick={this.props.onNext}>Increment</a>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
current: state.current,
index: state.index
};
}
const mapDispatchToProps = dispatch => {
return {
onNext: () => {
dispatch({
type: "NEXT"
});
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FibonacciCounter);javascript react.js redux
javascript react.js redux
asked Dec 10 at 17:00
michael.zech
1,7141433
asked Dec 10 at 17:00
michael.zech
1,7141433
edited Dec 10 at 17:17
asked Dec 10 at 17:00
michael.zech
1,7141433
asked Dec 10 at 17:00
michael.zech
1,7141433
asked Dec 10 at 17:00
michael.zech
1,7141433
1,7141433
There is nothing wrong at all with the source. Couple of small things - 1) String literals -<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span>2)return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1};can be justreturn {last: state.current, current: currentCopy + lastCopy, index: state.index + 1};as we completely modifying the previous state.
– yadav_vi
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
That's alright, maybe you can adddecrementand some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep myContainers(mapStateToProps,mapDispatchToProps) andReducersin a separate file altogether. (Since this is a small project, this is perfectly fine).
– yadav_vi
12 hours ago
add a comment |
There is nothing wrong at all with the source. Couple of small things - 1) String literals -<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span>2)return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1};can be justreturn {last: state.current, current: currentCopy + lastCopy, index: state.index + 1};as we completely modifying the previous state.
– yadav_vi
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
That's alright, maybe you can adddecrementand some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep myContainers(mapStateToProps,mapDispatchToProps) andReducersin a separate file altogether. (Since this is a small project, this is perfectly fine).
– yadav_vi
12 hours ago
There is nothing wrong at all with the source. Couple of small things - 1) String literals -
<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span> 2) return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1}; can be just return {last: state.current, current: currentCopy + lastCopy, index: state.index + 1}; as we completely modifying the previous state.– yadav_vi
12 hours ago
There is nothing wrong at all with the source. Couple of small things - 1) String literals -
<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span> 2) return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1}; can be just return {last: state.current, current: currentCopy + lastCopy, index: state.index + 1}; as we completely modifying the previous state.– yadav_vi
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
That's alright, maybe you can add
decrement and some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep my Containers(mapStateToProps, mapDispatchToProps) and Reducers in a separate file altogether. (Since this is a small project, this is perfectly fine).– yadav_vi
12 hours ago
That's alright, maybe you can add
decrement and some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep my Containers(mapStateToProps, mapDispatchToProps) and Reducers in a separate file altogether. (Since this is a small project, this is perfectly fine).– yadav_vi
12 hours ago
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f209377%2ffibonacci-counter-implemented-with-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f209377%2ffibonacci-counter-implemented-with-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
There is nothing wrong at all with the source. Couple of small things - 1) String literals -
<span>{(`00${years.length}`).slice(-3)}. Fibonacci Number:</span>2)return {...state, last: state.current, current: currentCopy + lastCopy, index: state.index + 1};can be justreturn {last: state.current, current: currentCopy + lastCopy, index: state.index + 1};as we completely modifying the previous state.– yadav_vi
12 hours ago
@yadav_vi Thanks a lot for your comment. If you like: Make your comment an answer. I'll accept it.
– michael.zech
12 hours ago
That's alright, maybe you can add
decrementand some other functionalities (maybe even a GitHub repo), would be fun to modify it. A small nitpick - I usually keep myContainers(mapStateToProps,mapDispatchToProps) andReducersin a separate file altogether. (Since this is a small project, this is perfectly fine).– yadav_vi
12 hours ago