Skip to content

Commit 7613e61

Browse files
sunzid02sunzid02
committed
Introduction to Redux
1 parent e540995 commit 7613e61

File tree

6 files changed

+95
-30
lines changed

6 files changed

+95
-30
lines changed

‎confusion/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@
1212
"react": "^16.13.1",
1313
"react-dom": "^16.13.1",
1414
"react-popper": "0.9.2",
15+
"react-redux": "5.0.7",
1516
"react-router-dom": "4.2.2",
1617
"react-scripts": "3.4.1",
17-
"reactstrap": "5.0.0"
18+
"reactstrap": "5.0.0",
19+
"redux": "3.7.2"
1820
},
1921
"scripts": {
2022
"start": "react-scripts start",

‎confusion/src/App.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,23 @@ import './App.css';
66

77
import { BrowserRouter } from 'react-router-dom';
88

9-
9+
import { Provider } from 'react-redux';
10+
import { ConfigureStore } from './redux/configureStore';
11+
const store = ConfigureStore();
1012

1113
class App extends Component{
1214

1315

1416
render(){
1517

1618
return(
17-
<BrowserRouter>
18-
<div>
19-
<Main />
20-
</div>
21-
</BrowserRouter>
19+
<Provider store={store}>
20+
<BrowserRouter>
21+
<div>
22+
<Main />
23+
</div>
24+
</BrowserRouter>
25+
</Provider>
2226
);
2327

2428
}

‎confusion/src/components/MainComponent.js

+20-21
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,43 @@ import Header from './HeaderComponent';
88
import Footer from './FooterComponent';
99
import DishDetail from './DishdetailComponent';
1010

11-
import { COMMENTS } from '../shared/comments'
12-
import { DISHES } from '../shared/dishes'
13-
import { LEADERS } from '../shared/leaders'
14-
import { PROMOTIONS } from '../shared/promotions'
11+
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
12+
import {connect} from 'react-redux';
1513

16-
import { Switch, Route, Redirect } from 'react-router-dom';
14+
15+
const mapStateToProps = state => {
16+
17+
return{
18+
comments: state.comments,
19+
dishes: state.dishes,
20+
leaders: state.leaders,
21+
promotions: state.promotions,
22+
}
23+
}
1724

1825

1926
class Main extends Component {
2027

2128
constructor(props) {
2229
super(props);
23-
24-
this.state = {
25-
comments: COMMENTS,
26-
dishes: DISHES,
27-
leaders: LEADERS,
28-
promotions: PROMOTIONS,
29-
};
30-
3130
}
3231

3332
render() {
3433

3534
const HomePage = () => {
3635
return(
3736
<Home
38-
dish={ this.state.dishes.filter( (dish)=>dish.featured )[0] }
39-
promotion={this.state.promotions.filter( (promotion)=>promotion.featured )[0] }
40-
leader={this.state.leaders.filter( (leader)=>leader.featured )[0] }
37+
dish={ this.props.dishes.filter( (dish)=>dish.featured )[0] }
38+
promotion={this.props.promotions.filter( (promotion)=>promotion.featured )[0] }
39+
leader={this.props.leaders.filter( (leader)=>leader.featured )[0] }
4140
/>
4241
);
4342
};
4443

4544
const AboutUsPage = () => {
4645
return(
4746
<About
48-
leaders={this.state.leaders}
47+
leaders={this.props.leaders}
4948
/>
5049
);
5150
};
@@ -55,8 +54,8 @@ class Main extends Component {
5554
return(
5655
<DishDetail
5756

58-
dish={this.state.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId, 10))[0] }
59-
comments={this.state.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId, 10)) }
57+
dish={this.props.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId, 10))[0] }
58+
comments={this.props.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId, 10)) }
6059

6160

6261
/>
@@ -71,7 +70,7 @@ class Main extends Component {
7170

7271
<Switch>
7372
<Route path="/home" component={ HomePage } />
74-
<Route exact path="/menu" component={() => <Menu dishes={this.state.dishes}/> }/>
73+
<Route exact path="/menu" component={() => <Menu dishes={this.props.dishes}/> }/>
7574

7675
<Route path="/menu/:dishId" component={DishWithId} />
7776

@@ -90,4 +89,4 @@ class Main extends Component {
9089

9190
}
9291

93-
export default Main;
92+
export default withRouter(connect(mapStateToProps)(Main));

‎confusion/src/redux/configureStore.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createStore } from 'redux';
2+
import { Reducer, initialState } from './reducer';
3+
4+
// creating store
5+
export const ConfigureStore = () => {
6+
const store = createStore(
7+
Reducer,
8+
initialState
9+
);
10+
11+
return store;
12+
}
13+

‎confusion/src/redux/reducer.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { COMMENTS } from '../shared/comments'
2+
import { DISHES } from '../shared/dishes'
3+
import { LEADERS } from '../shared/leaders'
4+
import { PROMOTIONS } from '../shared/promotions'
5+
6+
export const initialState = {
7+
comments: COMMENTS,
8+
dishes: DISHES,
9+
leaders: LEADERS,
10+
promotions: PROMOTIONS,
11+
};
12+
13+
export const Reducer = (state, action) => {
14+
return state;
15+
};

‎confusion/yarn.lock

+34-2
Original file line numberDiff line numberDiff line change
@@ -5388,7 +5388,7 @@ internal-slot@^1.0.2:
53885388
has "^1.0.3"
53895389
side-channel "^1.0.2"
53905390

5391-
invariant@^2.2.2, invariant@^2.2.4:
5391+
invariant@^2.0.0, invariant@^2.2.2, invariant@^2.2.4:
53925392
version "2.2.4"
53935393
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
53945394
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -6533,6 +6533,11 @@ locate-path@^5.0.0:
65336533
dependencies:
65346534
p-locate "^4.1.0"
65356535

6536+
lodash-es@^4.17.5, lodash-es@^4.2.1:
6537+
version "4.17.15"
6538+
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
6539+
integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
6540+
65366541
lodash._reinterpolate@^3.0.0:
65376542
version "3.0.0"
65386543
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -6583,7 +6588,7 @@ lodash.uniq@^4.5.0:
65836588
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
65846589
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
65856590

6586-
"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
6591+
"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.1:
65876592
version "4.17.15"
65886593
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
65896594
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -8709,6 +8714,18 @@ react-popper@^0.8.3:
87098714
popper.js "^1.12.9"
87108715
prop-types "^15.6.0"
87118716

8717+
react-redux@5.0.7:
8718+
version "5.0.7"
8719+
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
8720+
integrity sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==
8721+
dependencies:
8722+
hoist-non-react-statics "^2.5.0"
8723+
invariant "^2.0.0"
8724+
lodash "^4.17.5"
8725+
lodash-es "^4.17.5"
8726+
loose-envify "^1.1.0"
8727+
prop-types "^15.6.0"
8728+
87128729
react-router-dom@4.2.2:
87138730
version "4.2.2"
87148731
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@@ -8920,6 +8937,16 @@ redent@^3.0.0:
89208937
indent-string "^4.0.0"
89218938
strip-indent "^3.0.0"
89228939

8940+
redux@3.7.2:
8941+
version "3.7.2"
8942+
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
8943+
integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
8944+
dependencies:
8945+
lodash "^4.2.1"
8946+
lodash-es "^4.2.1"
8947+
loose-envify "^1.1.0"
8948+
symbol-observable "^1.0.3"
8949+
89238950
regenerate-unicode-properties@^8.2.0:
89248951
version "8.2.0"
89258952
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -10030,6 +10057,11 @@ svgo@^1.0.0, svgo@^1.2.2:
1003010057
unquote "~1.1.1"
1003110058
util.promisify "~1.0.0"
1003210059

10060+
symbol-observable@^1.0.3:
10061+
version "1.2.0"
10062+
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
10063+
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
10064+
1003310065
symbol-tree@^3.2.2:
1003410066
version "3.2.4"
1003510067
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

0 commit comments

Comments
 (0)