Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite7eb16c

Browse files
committed
Widgets without redux-dynamic-modules
1 parent9a9b482 commite7eb16c

File tree

9 files changed

+58
-87
lines changed

9 files changed

+58
-87
lines changed

‎packages/widgets-example/package-lock.json‎

Lines changed: 1 addition & 6 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎packages/widgets-example/package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@
1010
"react-redux":"^5.0.7",
1111
"react-scripts":"2.0.4",
1212
"redux":"^3.5.2",
13-
"redux-dynamic-modules":"^0.0.16",
14-
"redux-dynamic-modules-saga":"^0.0.16",
15-
"redux-dynamic-modules-thunk":"^0.0.16",
1613
"redux-saga":"^0.16.2",
1714
"redux-thunk":"^2.3.0"
1815
},

‎packages/widgets-example/src/App.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
importReact,{Component}from'react';
2-
import{Provider}from"react-redux";
32
// We will load the widgets async using react-loadable.
43
importLoadablefrom"react-loadable";
5-
// configureStore allows us to load/unload modules dynamically.
6-
import{configureStore}from"redux-dynamic-modules";
7-
// Saga extension allows us to use Saga middleware in the module store.
8-
import{getSagaExtension}from"redux-dynamic-modules-saga";
9-
// Thunk extension allows us to use Thunk middleware in the module store.
10-
import{getThunkExtension}from"redux-dynamic-modules-thunk";
4+
import{Provider}from"react-redux";
5+
import{applyMiddleware,combineReducers,compose,createStore}from"redux";
6+
importcreateSagaMiddlewarefrom"redux-saga";
7+
importthunkfrom"redux-thunk";
118
import'./App.css';
9+
import{fetchStories}from'./widgets/hacker-news/redux/hacker-news-actions';
10+
import{hackerNewsReducer}from'./widgets/hacker-news/redux/hacker-news-reducer';
11+
import{weatherReducer}from'./widgets/weather/redux/weather-reducer';
12+
import{weatherSaga}from'./widgets/weather/redux/weather-saga';
1213

1314
classAppextendsComponent{
1415
constructor(props){
@@ -20,12 +21,22 @@ class App extends Component {
2021
weather:false
2122
};
2223

23-
/**
24-
* configure the store and load the thunk and saga extension
25-
* The extensions are optional and you can choose extension based on the middleware you use
26-
* You can also build your own extensions for any other middleware e.g. redux-observable
27-
*/
28-
this.store=configureStore({},[getThunkExtension(),getSagaExtension()]);
24+
// WHAT IS NOT OPTIMUM HERE?
25+
// We need advance knowledge of all state keys and reducer
26+
// It is not modular and scalable
27+
constreducers=combineReducers({
28+
weatherState:weatherReducer,
29+
hackerNews:hackerNewsReducer
30+
})
31+
32+
constsagaMiddleware=createSagaMiddleware();
33+
constcomposeEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;
34+
this.store=createStore(reducers,composeEnhancers(applyMiddleware(thunk,sagaMiddleware)));
35+
36+
// WHAT IS NOT OPTIMUM HERE?
37+
// We need to run all Sagas in advance, even though the component
38+
// needing them is not Mounted yet
39+
sagaMiddleware.run(weatherSaga);
2940
}
3041

3142
render(){
@@ -47,10 +58,23 @@ class App extends Component {
4758
}
4859

4960
onHackerNewsToggled=()=>{
50-
this.setState({hackerNews:!this.state.hackerNews});
61+
consthackerNews=!this.state.hackerNews;
62+
if(hackerNews){
63+
// WHAT IS NOT OPTIMUM HERE?
64+
// App knows about the actions needed by the HackerNews component
65+
this.store.dispatch(fetchStories())
66+
}
67+
this.setState({ hackerNews});
5168
};
5269
onWeatherToggled=()=>{
53-
this.setState({weather:!this.state.weather});
70+
constweather=!this.state.weather;
71+
72+
if(weather){
73+
// WHAT IS NOT OPTIMUM HERE?
74+
// App knows about the actions needed by the Weather component
75+
this.store.dispatch({type:"LoadWeatherData"});
76+
}
77+
this.setState({ weather});
5478
}
5579

5680
renderContent=()=>{
Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
11
import{ConnectedHackerNews}from"./component/hacker-news-component";
2-
import{getHackerNewsModule}from"./redux/hacker-news-module";
3-
import{DynamicModuleLoader}from"redux-dynamic-modules";
4-
import*asReactfrom"react";
52

6-
exportdefaultfunctionDynamicHackerNews(){
7-
return(
8-
// define the module dependency for the HackerNews component
9-
// DynamicModuleLoader is a HOC provided by redux-dynamic-modules
10-
// It loads the module on ComponentDidMount and unloads on ComponentDidUnmount
11-
<DynamicModuleLoadermodules={[getHackerNewsModule()]}>
12-
{/*
13-
This is the Hacker News component that is connected to the redux store,
14-
the connected component need not know anything about modules.
15-
*/}
16-
<ConnectedHackerNews/>
17-
</DynamicModuleLoader>
18-
);
19-
}
3+
exportdefaultConnectedHackerNews;

‎packages/widgets-example/src/widgets/hacker-news/redux/hacker-news-module.js‎

Lines changed: 0 additions & 17 deletions
This file was deleted.
Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
11
import{ConnectedWeather}from"./component/weather-component";
2-
import{getWeatherModule}from"./redux/weather-module";
3-
import{DynamicModuleLoader}from"redux-dynamic-modules";
4-
import*asReactfrom"react";
52

6-
exportdefaultfunctionDynamic(){
7-
return(
8-
<DynamicModuleLoadermodules={[getWeatherModule()]}>
9-
<ConnectedWeather/>
10-
</DynamicModuleLoader>
11-
);
12-
}
3+
exportdefaultConnectedWeather;

‎packages/widgets-example/src/widgets/weather/redux/weather-module.js‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎packages/widgets-example/src/widgets/weather/redux/weather-saga.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import{call,put}from"redux-saga/effects";
1+
import{call,put,takeLatest}from"redux-saga/effects";
22
import{weatherLoaded}from"./weather-actions";
33

44
exportfunction*weatherSaga(){
5-
yieldcall(loadWeatherData);
5+
yieldtake("LoadWeatherData",loadWeatherData);
66
}
77

88
function*loadWeatherData(){

‎packages/widgets-example/steps.txt‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
//1. INSTALL PACKAGES
2+
npm install redux-dynamic-modules redux-dynamic-modules-saga redux-dynamic-modules-thunk
3+
4+
5+
//2. ADD IMPORTS TO APP.JS
6+
7+
// configureStore allows us to load/unload modules dynamically.
8+
import { configureStore } from "redux-dynamic-modules";
9+
// Saga extension allows us to use Saga middleware in the module store.
10+
import { getSagaExtension } from "redux-dynamic-modules-saga";
11+
// Thunk extension allows us to use Thunk middleware in the module store.
12+
import { getThunkExtension } from "redux-dynamic-modules-thunk";
13+
14+
//3.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp