{this.props.children}
);
84 | }
85 | }
86 | ```
87 |
88 | [slide]
89 |
90 | # connect高阶组件目的
91 |
92 | - 被```
111 | 
112 |
113 |
114 | [slide]
115 |
116 | # connect高阶组件实现一
117 |
118 | - 第一步：内部封装掉了每个组件都要写的访问context的代码
119 |
120 | ``` JavaScript
121 | import React, { Component } from 'react';
122 | import PropTypes from 'prop-types';
123 |
124 | const connect = (WrappedComponent) => {
125 | class Connect extends Component {
126 | static contextTypes = {
127 | store: PropTypes.object,
128 | };
129 |
130 | render() {
131 | return (
112 |
291 |
292 |
293 |
294 | [slide]
295 |
296 | # 总结（回顾）
297 |
298 | - react-redux一共就一个组件和一个API：
299 |
300 | - ```
292 |
638 | 
639 |
640 |
641 | [slide]
642 |
643 |
639 |
644 | 
645 |
646 |
647 | # THE END
648 |
649 | ### THANK YOU
650 |
--------------------------------------------------------------------------------
/scripts/dev.js:
--------------------------------------------------------------------------------
1 | // require('babel-polyfill');
2 | require('babel-register')();
3 | require('./dev/index');
4 |
--------------------------------------------------------------------------------
/scripts/dev/index.js:
--------------------------------------------------------------------------------
1 | import open from 'open';
2 | import webpack from 'webpack';
3 | import WebpackDevServer from 'webpack-dev-server';
4 | import path from 'path';
5 | import webpackConfig from '../webpack.config';
6 |
7 | const compiler = webpack(webpackConfig);
8 |
9 | const SRC = path.join(process.cwd(), 'src');
10 | const MOCK_SERVER = path.join(process.cwd(), 'mock-server');
11 |
12 | const devServerOptions = {
13 | contentBase: [
14 | SRC,
15 | MOCK_SERVER,
16 | ],
17 | hot: true,
18 | historyApiFallback: true,
19 | stats: 'verbose',
20 | };
21 |
22 | const server = new WebpackDevServer(compiler, devServerOptions);
23 | let opened = false;
24 |
25 | const openBrowser = () => {
26 | const address = server.listeningApp.address();
27 | const url = `http://${address.address}:${address.port}`;
28 | console.log(` server started: ${url}`);
29 | open(`${url}/redux.html`);
30 | };
31 |
32 | compiler.plugin('done', () => {
33 | if (!opened) {
34 | opened = true;
35 | openBrowser();
36 | }
37 | });
38 |
39 | const startServer = new Promise((resolve, reject) => {
40 | server.listen(webpackConfig.devServer.port, webpackConfig.devServer.host, (err) => {
41 | if (err) {
42 | reject(err);
43 | } else {
44 | resolve();
45 | }
46 | });
47 | });
48 |
49 | const devServer = async() => {
50 | await startServer;
51 |
52 | const stdIn = process.stdin;
53 | stdIn.setEncoding('utf8');
54 | stdIn.on('data', openBrowser);
55 | };
56 |
57 | devServer().catch((ex) => {
58 | console.error(ex);
59 | });
60 |
61 |
--------------------------------------------------------------------------------
/scripts/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const fs = require('fs');
3 | const path = require('path');
4 | const glob = require('glob');
5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
6 | // const ExtractTextPlugin = require('extract-text-webpack-plugin');
7 | const PostcssImport = require('postcss-import');
8 | const precss = require('precss');
9 | const cssnext = require('postcss-cssnext');
10 |
11 | const ENV_DEVELOPMENT = 'development';
12 | const ENV_PRODUCTION = 'production';
13 | const HOST = process.env.HOST || `0.0.0.0`;
14 | const PORT = process.env.PORT || 9999;
15 |
16 | const SRC = path.join(process.cwd(), 'src');
17 | const BUILD = path.join(process.cwd(), 'build');
18 | const TEMPLATE = path.join(process.cwd(), 'template');
19 | const ENTRIES = path.join(SRC, 'entries');
20 | const BASEDIR = path.join(__dirname, '..');
21 |
22 | const NODE_ENV = process.env.NODE_ENV || 'production';
23 |
24 | const config = {
25 | // entry: {
26 | // common: [
27 | // // 'babel-polyfill',
28 | // 'react',
29 | // 'react-dom'
30 | // ]
31 | // },
32 | entry: {},
33 | output: {
34 | path: `${BUILD}`,
35 | filename: '[name]',
36 | publicPath: './'
37 | },
38 | devtool: 'eval',
39 | module: {
40 | loaders: [
41 | {
42 | test: /\.js$/,
43 | exclude: /node_modules/,
44 | use: ['babel-loader', 'react-hot-loader/webpack'],
45 | },
46 | {
47 | test: /\.(png|jpg|gif)$/,
48 | loader: 'url-loader?limit=2048000',
49 | },
50 | {
51 | test: /\.css$/,
52 | use: ['style-loader', 'css-loader'],
53 | },
54 | {
55 | test: /\.pcss$/,
56 | use: [
57 | 'style-loader',
58 | 'css-loader',
59 | {
60 | loader: 'postcss-loader',
61 | options: {
62 | plugins: function() {
63 | return [
64 | PostcssImport(),
65 | precss,
66 | cssnext,
67 | ];
68 | },
69 | },
70 | },
71 | ],
72 | },
73 | {
74 | enforce: 'pre',
75 | test: /\.js$/,
76 | include: [
77 | path.resolve(BASEDIR, 'src'),
78 | ],
79 | use: 'eslint-loader',
80 | }
81 | ]
82 | },
83 | plugins: [
84 | // new ExtractTextPlugin(`${ENTRIES}/[name]-[hash].pcss`),
85 | // new webpack.optimize.CommonsChunkPlugin('common', 'js/common.js'),
86 | // new webpack.NamedModulesPlugin(),
87 | ],
88 | };
89 |
90 |
91 | const entryFileNameList = glob.sync(path.join(SRC, '*/entries') + '/*.js');
92 | entryFileNameList.forEach((item) => {
93 | const {
94 | entry,
95 | plugins
96 | } = config;
97 |
98 | let fileName = path.basename(item, '.js');
99 | entry[fileName] = [`${item}`];
100 | console.log('entry[item]: ', entry[fileName]);
101 |
102 | entry[fileName].unshift(`webpack-dev-server/client?http://${HOST}:${PORT}`);
103 | entry[fileName].unshift(`webpack/hot/log-apply-result`);
104 |
105 | // hot reload
106 | entry[fileName].unshift(`webpack/hot/only-dev-server`);
107 | entry[fileName].unshift(`react-hot-loader/patch`);
108 |
109 | const htmlName = fileName.toLowerCase();
110 | plugins.push(
111 | new HtmlWebpackPlugin({
112 | template: `${TEMPLATE}/index.html`,
113 | filename: `${htmlName}.html`,
114 | hash: false,
115 | inject: 'body',
116 | chunks: [
117 | // 'common',
118 | fileName,
119 | ]
120 | })
121 | );
122 | });
123 |
124 | switch (NODE_ENV) {
125 | case ENV_DEVELOPMENT:
126 | console.log('dev start');
127 | config.output.publicPath = '/';
128 | config.devServer = {
129 | historyApiFallback: true,
130 | hot: true,
131 | inline: true,
132 | progress: true,
133 | stats: {
134 | colors: true,
135 | hash: false,
136 | version: false,
137 | timings: false,
138 | assets: false,
139 | chunks: false,
140 | modules: false,
141 | reasons: false,
142 | children: false,
143 | source: false,
144 | errors: true,
145 | errorDetails: true,
146 | warnings: true,
147 | publicPath: false
148 | },
149 | host: HOST,
150 | port: PORT
151 | };
152 |
153 | config.plugins.push(
154 | new webpack.HotModuleReplacementPlugin()
155 | );
156 | break;
157 | // case ENV_PRODUCTION:
158 | // config.plugins.push(
159 | // new webpack.optimize.UglifyJsPlugin({
160 | // compress: {
161 | // warnings: false
162 | // }
163 | // }),
164 | // new webpack.DefinePlugin({
165 | // 'process.env': {
166 | // NODE_ENV: JSON.stringify('production')
167 | // }
168 | // })
169 | // );
170 | // break;
171 | default:
172 | break;
173 | }
174 |
175 | module.exports = config;
176 |
--------------------------------------------------------------------------------
/src/originRedux/entries/redux.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import Demo from '../originRedux';
5 |
6 | render(
7 |
645 |
50 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/originRedux/originRedux.pcss:
--------------------------------------------------------------------------------
1 | .wrap {
2 | margin: 20px;
3 | font-size: 18px;
4 | .numValue {
5 | color: red;
6 | }
7 | .numBtn {
8 | margin: 10px;
9 | &:first-child {
10 | margin-left: 0;
11 | }
12 | }
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/src/originReduxAction/actions/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export const incrementNum = () => ({
4 | type: constant.INCREMENT,
5 | });
6 |
7 | export const decrementNum = () => ({
8 | type: constant.DECREMENT,
9 | });
10 |
11 | export const clearNum = () => ({
12 | type: constant.CLEAR_NUM,
13 | });
14 |
--------------------------------------------------------------------------------
/src/originReduxAction/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 |
--------------------------------------------------------------------------------
/src/originReduxAction/entries/reduxaction.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import Demo from '../originReduxAction';
5 |
6 | render(
7 | origin Redux
51 | Current Number: 0 52 |
53 |
54 |
55 |
56 |
57 |
52 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/actions/alert.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | toggleAlert: () => ({
5 | type: constant.TOGGLE_ALERT,
6 | }),
7 | };
8 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/actions/index.js:
--------------------------------------------------------------------------------
1 | import number from './number';
2 | import alert from './alert';
3 |
4 | export default {
5 | number,
6 | alert,
7 | };
8 |
9 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/actions/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | incrementNum: () => ({
5 | type: constant.INCREMENT,
6 | }),
7 | decrementNum: () => ({
8 | type: constant.DECREMENT,
9 | }),
10 | clearNum: () => ({
11 | type: constant.CLEAR_NUM,
12 | }),
13 | };
14 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/entries/reduxcombinereducer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import Demo from '../originReduxCombineReducer';
5 |
6 | render(
7 | origin Redux action
53 | Current Number: 0 54 |
55 |
56 |
57 |
58 |
59 |
48 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/reducers/alert.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 | import { createReducer } from '../lib/common';
3 |
4 | const initialState = {
5 | showAlert: false,
6 | };
7 |
8 | export default createReducer(initialState, {
9 | [constant.TOGGLE_ALERT]: (state, action) => {
10 | return {
11 | ...state,
12 | showAlert: !state.showAlert,
13 | };
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | // import { combineReducers } from '../lib/common';
3 | import changeNumber from './number';
4 | import toggleAlert from './alert';
5 |
6 | export default combineReducers({
7 | changeNumber,
8 | toggleAlert,
9 | });
10 |
--------------------------------------------------------------------------------
/src/originReduxCombineReducer/reducers/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 | import { createReducer } from '../lib/common';
3 |
4 | const initialState = {
5 | number: 0,
6 | };
7 |
8 | export default createReducer(initialState, {
9 | [constant.INCREMENT]: (state, action) => {
10 | return {
11 | ...state,
12 | number: state.number + 1,
13 | };
14 | },
15 | [constant.DECREMENT]: (state, action) => {
16 | return {
17 | ...state,
18 | number: state.number - 1,
19 | };
20 | },
21 | [constant.CLEAR_NUM]: (state, action) => {
22 | return {
23 | ...state,
24 | number: 0,
25 | };
26 | },
27 | });
28 |
--------------------------------------------------------------------------------
/src/originReduxReducer/actions/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export const incrementNum = () => ({
4 | type: constant.INCREMENT,
5 | });
6 |
7 | export const decrementNum = () => ({
8 | type: constant.DECREMENT,
9 | });
10 |
11 | export const clearNum = () => ({
12 | type: constant.CLEAR_NUM,
13 | });
14 |
--------------------------------------------------------------------------------
/src/originReduxReducer/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 |
--------------------------------------------------------------------------------
/src/originReduxReducer/entries/reduxreducer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import Demo from '../originReduxReducer';
5 |
6 | render(
7 | origin Redux combine reducer
49 | Current Number: 0 50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
59 |
35 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/originReduxReducer/reducers/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | const initialState = {
4 | number: 0,
5 | };
6 |
7 | export default (state = initialState, action) => {
8 | switch (action.type) {
9 | case constant.INCREMENT:
10 | return {
11 | ...state,
12 | number: state.number + 1,
13 | };
14 | case constant.DECREMENT:
15 | return {
16 | ...state,
17 | number: state.number - 1,
18 | };
19 | case constant.CLEAR_NUM:
20 | return {
21 | ...state,
22 | number: 0,
23 | };
24 | default:
25 | return state;
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/src/originReduxStore/actions/alert.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | toggleAlert: () => ({
5 | type: constant.TOGGLE_ALERT,
6 | }),
7 | };
8 |
--------------------------------------------------------------------------------
/src/originReduxStore/actions/index.js:
--------------------------------------------------------------------------------
1 | import number from './number';
2 | import alert from './alert';
3 |
4 | export default {
5 | number,
6 | alert,
7 | };
8 |
9 |
--------------------------------------------------------------------------------
/src/originReduxStore/actions/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | incrementNum: () => ({
5 | type: constant.INCREMENT,
6 | }),
7 | decrementNum: () => ({
8 | type: constant.DECREMENT,
9 | }),
10 | clearNum: () => ({
11 | type: constant.CLEAR_NUM,
12 | }),
13 | };
14 |
--------------------------------------------------------------------------------
/src/originReduxStore/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 |
--------------------------------------------------------------------------------
/src/originReduxStore/entries/reduxstore.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import Demo from '../originReduxStore';
5 |
6 | render(
7 | origin Redux reducer
36 | Current Number: 0 37 |
38 |
39 |
40 |
41 |
42 |
55 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/originReduxStore/reducers/alert.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 | import { createReducer } from '../lib/common';
3 |
4 | const initialState = {
5 | showAlert: false,
6 | };
7 |
8 | export default createReducer(initialState, {
9 | [constant.TOGGLE_ALERT]: (state, action) => {
10 | return {
11 | ...state,
12 | showAlert: !state.showAlert,
13 | };
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/src/originReduxStore/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import changeNumber from './number';
3 | import toggleAlert from './alert';
4 |
5 | export default combineReducers({
6 | changeNumber,
7 | toggleAlert,
8 | });
9 |
--------------------------------------------------------------------------------
/src/originReduxStore/reducers/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 | import { createReducer } from '../lib/common';
3 |
4 | const initialState = {
5 | number: 0,
6 | };
7 |
8 | export default createReducer(initialState, {
9 | [constant.INCREMENT]: (state, action) => {
10 | return {
11 | ...state,
12 | number: state.number + 1,
13 | };
14 | },
15 | [constant.DECREMENT]: (state, action) => {
16 | return {
17 | ...state,
18 | number: state.number - 1,
19 | };
20 | },
21 | [constant.CLEAR_NUM]: (state, action) => {
22 | return {
23 | ...state,
24 | number: 0,
25 | };
26 | },
27 | });
28 |
--------------------------------------------------------------------------------
/src/reactRedux/actions/alert.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | toggleAlert: () => ({
5 | type: constant.TOGGLE_ALERT,
6 | }),
7 | };
8 |
--------------------------------------------------------------------------------
/src/reactRedux/actions/index.js:
--------------------------------------------------------------------------------
1 | import number from './number';
2 | import alert from './alert';
3 |
4 | export default {
5 | number,
6 | alert,
7 | };
8 |
9 |
--------------------------------------------------------------------------------
/src/reactRedux/actions/number.js:
--------------------------------------------------------------------------------
1 | import * as constant from '../configs/action';
2 |
3 | export default {
4 | incrementNum: () => ({
5 | type: constant.INCREMENT,
6 | }),
7 | decrementNum: () => ({
8 | type: constant.DECREMENT,
9 | }),
10 | clearNum: () => ({
11 | type: constant.CLEAR_NUM,
12 | }),
13 | };
14 |
--------------------------------------------------------------------------------
/src/reactRedux/components/alert/alert.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { Button, Alert } from 'antd';
4 | import 'antd/dist/antd.css';
5 | import './alert.pcss';
6 |
7 | export default class AlertComponent extends Component {
8 | render() {
9 | const {
10 | showAlert,
11 | handleClickAlert,
12 | } = this.props;
13 |
14 | return (
15 | origin Redux store
56 | Current Number: 0 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
66 |
67 |
68 |
69 |
16 |
17 | {
18 | showAlert ?
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/reactRedux/components/alert/alert.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactRedux/components/number/number.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { Button } from 'antd';
4 | import 'antd/dist/antd.css';
5 | import './number.pcss';
6 |
7 | export default class Number extends Component {
8 |
9 | render() {
10 | const {
11 | value,
12 | handleClickAdd,
13 | handleClickMinux,
14 | handleClickClear,
15 | } = this.props;
16 |
17 | return (
18 |
19 | Current Number: {value}
20 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/reactRedux/components/number/number.pcss:
--------------------------------------------------------------------------------
1 | .numValue {
2 | color: red;
3 | }
4 |
5 | .numBtn {
6 | margin: 10px;
7 | &:first-child {
8 | margin-left: 0;
9 | }
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/src/reactRedux/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 |
--------------------------------------------------------------------------------
/src/reactRedux/containers/sample/sample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { bindActionCreators } from 'redux';
3 | // import { bindActionCreators } from '../../lib/common';
4 | import { render } from 'react-dom';
5 | import { connect } from 'react-redux';
6 | // import connect from '../../lib/connect';
7 | import action from '../../actions/index';
8 | import NumberComponent from '../../components/number/number';
9 | import AlertComponent from '../../components/alert/alert';
10 | import './sample.pcss';
11 |
12 | class Sample extends Component {
13 |
14 | handleClickAdd = () => {
15 | this.props.incrementNum();
16 | };
17 |
18 | handleClickMinux = () => {
19 | this.props.decrementNum();
20 | };
21 |
22 | handleClickClear = () => {
23 | this.props.clearNum();
24 | };
25 |
26 | handleClickAlert = () => {
27 | this.props.toggleAlert();
28 | };
29 |
30 | render() {
31 | const {
32 | number,
33 | showAlert,
34 | } = this.props;
35 |
36 | return (
37 |
21 |
22 |
23 |
24 |
25 |
38 |
50 | );
51 | }
52 | }
53 |
54 | const mapStateToProps = (state) => {
55 | return {
56 | number: state.changeNumber.number,
57 | showAlert: state.toggleAlert.showAlert,
58 | };
59 | };
60 |
61 | // const mapDispatchToProps = (dispatch) => {
62 | // return {
63 | // incrementNum: () => dispatch(action.number.incrementNum()),
64 | // decrementNum: () => dispatch(action.number.decrementNum()),
65 | // clearNum: () => dispatch(action.number.clearNum()),
66 | // toggleAlert: () => dispatch(action.alert.toggleAlert()),
67 | // };
68 | // };
69 |
70 | // const mapDispatchToProps = (dispatch) => {
71 | // return {
72 | // incrementNum: bindActionCreators(action.number.incrementNum, dispatch),
73 | // decrementNum: bindActionCreators(action.number.decrementNum, dispatch),
74 | // clearNum: bindActionCreators(action.number.clearNum, dispatch),
75 | // toggleAlert: bindActionCreators(action.alert.toggleAlert, dispatch),
76 | // };
77 | // };
78 |
79 | const mapDispatchToProps = {
80 | incrementNum: action.number.incrementNum,
81 | decrementNum: action.number.decrementNum,
82 | clearNum: action.number.clearNum,
83 | toggleAlert: action.alert.toggleAlert,
84 | };
85 |
86 | export default connect(
87 | mapStateToProps,
88 | mapDispatchToProps,
89 | )(Sample);
90 |
91 | // const mergeProps = (stateProps, dispatchProps, ownProps) => {
92 | // return {
93 | // ...ownProps,
94 | // ...stateProps,
95 | // incrementNum: dispatchProps.incrementNum, // 只暴露出 incrementNum
96 | // };
97 | // };
98 | //
99 | // const mergeProps = (stateProps, dispatchProps, ownProps) => {
100 | // return {
101 | // ...ownProps,
102 | // state: stateProps,
103 | // actions: {
104 | // ...dispatchProps,
105 | // ...ownProps.actions,
106 | // },
107 | // };
108 | // };
109 | //
110 | // export default connect(
111 | // mapStateToProps,
112 | // mapDispatchToProps,
113 | // mergeProps,
114 | // )(Sample);
115 |
--------------------------------------------------------------------------------
/src/reactRedux/containers/sample/sample.pcss:
--------------------------------------------------------------------------------
1 | .wrap {
2 | margin: 20px;
3 | font-size: 18px;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/src/reactRedux/entries/reactRedux.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import { createStore, applyMiddleware, compose } from 'redux';
5 | import { createLogger } from 'redux-logger';
6 | import { Provider } from 'react-redux';
7 | // import Provider from '../lib/Provider';
8 | import reducer from '../reducers/index';
9 | import Sample from '../containers/sample/sample';
10 |
11 | const logger = createLogger();
12 | const store = createStore(reducer, compose(
13 | applyMiddleware(logger),
14 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), // eslint-disable-line
15 | ));
16 |
17 | render(
18 | recat redux
39 |{this.props.children}
);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/reactRedux/lib/common.js:
--------------------------------------------------------------------------------
1 | export const createReducer = (initialState, handlers) => {
2 | return (state = initialState, action) => {
3 | if (handlers.hasOwnProperty(action.type)) {
4 | return handlers[action.type](state, action);
5 | }
6 | return state;
7 | };
8 | };
9 |
10 | export const createStore = (reducer) => {
11 | let state = {};
12 | const listeners = [];
13 | const getState = () => state;
14 | const dispatch = (action) => {
15 | state = reducer(state, action);
16 | listeners.forEach((listener) => listener());
17 | };
18 | const subscribe = (listener) => listeners.push(listener);
19 |
20 | return {
21 | getState,
22 | dispatch,
23 | subscribe,
24 | };
25 | };
26 |
27 | export const bindActionCreators = (actionCreators, dispatch) => {
28 | return () => dispatch(actionCreators());
29 | };
30 |
--------------------------------------------------------------------------------
/src/reactRedux/lib/connect.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
5 | class Connect extends Component {
6 | static contextTypes = {
7 | store: PropTypes.object,
8 | };
9 |
10 | constructor() {
11 | super();
12 | this.state = { finalProps: {} };
13 | // this.finalDispatchToProps = {};
14 | }
15 |
16 | componentWillMount() {
17 | const { store } = this.context;
18 | // const tempDispatchToProps = {};
19 | // if (typeof mapDispatchToProps === 'object') {
20 | // const keys = Object.keys(mapDispatchToProps);
21 | // keys.forEach((key) => {
22 | // const actionCreator = mapDispatchToProps[key];
23 | // tempDispatchToProps[key] = () => store.dispatch(actionCreator());
24 | // });
25 | // this.finalDispatchToProps = () => tempDispatchToProps;
26 | // } else {
27 | // this.finalDispatchToProps = () => mapDispatchToProps(store.dispatch);
28 | // }
29 | this.updateProps();
30 | store.subscribe(this.updateProps);
31 | }
32 |
33 | updateProps = () => {
34 | const { store } = this.context;
35 | const stateProps = mapStateToProps(store.getState());
36 | const dispatchProps = mapDispatchToProps(store.dispatch);
37 | // const dispatchProps = this.finalDispatchToProps();
38 |
39 | const finalProps = {
40 | ...stateProps,
41 | ...dispatchProps,
42 | ...this.props,
43 | };
44 |
45 | this.setState({
46 | finalProps,
47 | });
48 | };
49 |
50 | render() {
51 | const { finalProps } = this.state;
52 | return (
16 |
17 | {
18 | showAlert ?
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/alert/alert.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/fetchData/fetchData.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { Button } from 'antd';
4 | import 'antd/dist/antd.css';
5 | import LoadingComponent from '../loading/loading';
6 | import './fetchData.pcss';
7 |
8 | export default class FetchDataComponent extends Component {
9 | render() {
10 | const {
11 | showloading,
12 | handleClickFetchData,
13 | } = this.props;
14 |
15 | return (
16 |
17 |
18 |
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/fetchData/fetchData.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/loading/images/page-loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackZhangXL/react-redux-demo/81bfd927e4f786e6cbaed06b2e9306a5070ee3b9/src/reactReduxAsync/components/loading/images/page-loading.gif
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/loading/loading.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './loading.pcss';
3 |
4 | export default class Loading extends Component {
5 | render() {
6 | const {
7 | show,
8 | } = this.props;
9 |
10 | return (
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/loading/loading.pcss:
--------------------------------------------------------------------------------
1 | .loading {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | background-color: rgba(0, 0, 0, 0.3);
6 | background-image: url(./images/page-loading.gif);
7 | background-size: 50px;
8 | background-repeat: no-repeat;
9 | background-position: center;
10 | width: 100%;
11 | height: 100%;
12 | z-index: 11;
13 | }
14 |
15 | .hide {
16 | display: none;
17 | }
18 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/number/number.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { Button } from 'antd';
4 | import 'antd/dist/antd.css';
5 | import './number.pcss';
6 |
7 | export default class Number extends Component {
8 |
9 | render() {
10 | const {
11 | value,
12 | handleClickAdd,
13 | handleClickMinux,
14 | handleClickClear,
15 | } = this.props;
16 |
17 | return (
18 |
19 | Current Number: {value}
20 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/components/number/number.pcss:
--------------------------------------------------------------------------------
1 | .numValue {
2 | color: red;
3 | }
4 |
5 | .numBtn {
6 | margin: 10px;
7 | &:first-child {
8 | margin-left: 0;
9 | }
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 | export const REQUEST_DATA = 'REQUEST_DATA';
7 | export const RECEIVE_DATA = 'RECEIVE_DATA';
8 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/containers/sample/sample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { connect } from 'react-redux';
4 | import action from '../../actions/index';
5 | import NumberComponent from '../../components/number/number';
6 | import AlertComponent from '../../components/alert/alert';
7 | import FetchDataComponent from '../../components/fetchData/fetchData';
8 | import './sample.pcss';
9 |
10 | class Sample extends Component {
11 |
12 | handleClickAdd = () => {
13 | this.props.incrementNum();
14 | };
15 |
16 | handleClickMinux = () => {
17 | this.props.decrementNum();
18 | };
19 |
20 | handleClickClear = () => {
21 | this.props.clearNum();
22 | };
23 |
24 | handleClickAlert = () => {
25 | this.props.toggleAlert();
26 | };
27 |
28 | handleClickFetchData = () => {
29 | this.props.fetchDataAction();
30 | };
31 |
32 | render() {
33 | const {
34 | number,
35 | showAlert,
36 | fetching,
37 | data,
38 | } = this.props;
39 |
40 | return (
41 |
21 |
22 |
23 |
24 |
25 |
42 |
59 | );
60 | }
61 | }
62 |
63 | export default connect((state) => ({
64 | number: state.changeNumber.number,
65 | showAlert: state.toggleAlert.showAlert,
66 | fetching: state.fetchData.fetching,
67 | data: state.fetchData.data,
68 | }), {
69 | incrementNum: action.number.incrementNum,
70 | decrementNum: action.number.decrementNum,
71 | clearNum: action.number.clearNum,
72 | toggleAlert: action.alert.toggleAlert,
73 | fetchDataAction: action.fetchDataAction.fetchDataAction,
74 | })(Sample);
75 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/containers/sample/sample.pcss:
--------------------------------------------------------------------------------
1 | .wrap {
2 | margin: 20px;
3 | font-size: 18px;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/src/reactReduxAsync/entries/reactReduxAsync.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import { createStore, applyMiddleware, compose } from 'redux';
5 | import thunk from 'redux-thunk';
6 | // import { thunk } from '../lib/common';
7 | import { createLogger } from 'redux-logger';
8 | import { Provider } from 'react-redux';
9 | import reducer from '../reducers/index';
10 | import Sample from '../containers/sample/sample';
11 |
12 | const logger = createLogger();
13 | const store = createStore(reducer, compose(
14 | applyMiddleware(thunk, logger),
15 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), // eslint-disable-line
16 | ));
17 |
18 | render(
19 | recat redux async
43 |{ data !== null ? data.msg : '' }
58 |
16 |
17 | {
18 | showAlert ?
21 | );
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/components/alert/alert.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/components/number/number.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { Button } from 'antd';
4 | import 'antd/dist/antd.css';
5 | import './number.pcss';
6 |
7 | export default class Number extends Component {
8 |
9 | render() {
10 | const {
11 | value,
12 | handleClickAdd,
13 | handleClickMinux,
14 | handleClickClear,
15 | } = this.props;
16 |
17 | return (
18 |
19 | Current Number: {value}
20 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/components/number/number.pcss:
--------------------------------------------------------------------------------
1 | .numValue {
2 | color: red;
3 | }
4 |
5 | .numBtn {
6 | margin: 10px;
7 | &:first-child {
8 | margin-left: 0;
9 | }
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/containers/sample/sample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { render } from 'react-dom';
4 | import { connect } from 'react-redux';
5 | import action from '../../actions/index';
6 | import NumberComponent from '../../components/number/number';
7 | import AlertComponent from '../../components/alert/alert';
8 | import './sample.pcss';
9 |
10 | class Sample extends Component {
11 |
12 | // static contextTypes = {
13 | // store: PropTypes.object,
14 | // };
15 |
16 | handleClickAdd = () => {
17 | // console.log('prevState: ', this.context.store.getState());
18 | // console.log('action: ', action.number.incrementNum());
19 | this.props.incrementNum();
20 | // console.log('currentState: ', this.context.store.getState());
21 | };
22 |
23 | handleClickMinux = () => {
24 | this.props.decrementNum();
25 | };
26 |
27 | handleClickClear = () => {
28 | this.props.clearNum();
29 | };
30 |
31 | handleClickAlert = () => {
32 | this.props.toggleAlert();
33 | };
34 |
35 | render() {
36 | const {
37 | number,
38 | showAlert,
39 | } = this.props;
40 |
41 | return (
42 |
21 |
22 |
23 |
24 |
25 |
43 |
55 | );
56 | }
57 | }
58 |
59 | const mapStateToProps = (state) => {
60 | return {
61 | number: state.changeNumber.number,
62 | showAlert: state.toggleAlert.showAlert,
63 | };
64 | };
65 |
66 | const mapDispatchToProps = {
67 | incrementNum: action.number.incrementNum,
68 | decrementNum: action.number.decrementNum,
69 | clearNum: action.number.clearNum,
70 | toggleAlert: action.alert.toggleAlert,
71 | };
72 |
73 | export default connect(
74 | mapStateToProps,
75 | mapDispatchToProps,
76 | )(Sample);
77 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/containers/sample/sample.pcss:
--------------------------------------------------------------------------------
1 | .wrap {
2 | margin: 20px;
3 | font-size: 18px;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/src/reactReduxMiddleware/entries/reactReduxMiddleware.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import { createStore } from 'redux';
5 | import { Provider } from 'react-redux';
6 | import reducer from '../reducers/index';
7 | import Sample from '../containers/sample/sample';
8 | import {
9 | middleware1,
10 | middleware2,
11 | loggerAction,
12 | loggerState,
13 | applyMiddleware,
14 | applyMiddlewarePlus,
15 | compose,
16 | } from '../lib/middleware';
17 |
18 | // Step0 - 手写 console.log
19 | // const store = createStore(reducer);
20 |
21 | // Step1 - 自定义中间件
22 | // const store = createStore(reducer);
23 | // store.dispatch = middleware1(store.dispatch);
24 | // store.dispatch = middleware2(store.dispatch);
25 |
26 | // Step2 - 用 applyMiddleware 将中间件更优雅地链接起来
27 | // let store = createStore(reducer);
28 | // store = applyMiddleware(store, [loggerAction, loggerState]);
29 |
30 | // Step3 - 更优雅的 applyMiddleware
31 | // const store = applyMiddlewarePlus(loggerAction, loggerState)(createStore)(reducer);
32 |
33 | // Step4 - 增加 compose 绑定插件功能
34 | const store = createStore(reducer, compose(
35 | applyMiddlewarePlus(loggerAction, loggerState),
36 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), // eslint-disable-line
37 | ));
38 |
39 | render(
40 | recat redux middleware
44 |
15 |
16 | {
17 | showAlert ?
20 | );
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/alert/alert.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/fetchData/fetchData.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'antd';
3 | import 'antd/dist/antd.css';
4 | import LoadingComponent from '../loading/loading';
5 | import './fetchData.pcss';
6 |
7 | export default class FetchDataComponent extends Component {
8 | render() {
9 | const {
10 | showloading,
11 | handleClickFetchData,
12 | } = this.props;
13 |
14 | return (
15 |
16 |
17 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/fetchData/fetchData.pcss:
--------------------------------------------------------------------------------
1 | .numBtn {
2 | margin: 10px;
3 | &:first-child {
4 | margin-left: 0;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/loading/images/page-loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JackZhangXL/react-redux-demo/81bfd927e4f786e6cbaed06b2e9306a5070ee3b9/src/reactReduxSaga/components/loading/images/page-loading.gif
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/loading/loading.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './loading.pcss';
3 |
4 | export default class Loading extends Component {
5 | render() {
6 | const {
7 | show,
8 | } = this.props;
9 |
10 | return (
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/loading/loading.pcss:
--------------------------------------------------------------------------------
1 | .loading {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | background-color: rgba(0, 0, 0, 0.3);
6 | background-image: url(./images/page-loading.gif);
7 | background-size: 50px;
8 | background-repeat: no-repeat;
9 | background-position: center;
10 | width: 100%;
11 | height: 100%;
12 | z-index: 11;
13 | }
14 |
15 | .hide {
16 | display: none;
17 | }
18 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/number/number.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'antd';
3 | import 'antd/dist/antd.css';
4 | import './number.pcss';
5 |
6 | export default class Number extends Component {
7 |
8 | render() {
9 | const {
10 | value,
11 | handleClickAdd,
12 | handleClickMinux,
13 | handleClickClear,
14 | } = this.props;
15 |
16 | return (
17 |
18 | Current Number: {value}
19 |
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/components/number/number.pcss:
--------------------------------------------------------------------------------
1 | .numValue {
2 | color: red;
3 | }
4 |
5 | .numBtn {
6 | margin: 10px;
7 | &:first-child {
8 | margin-left: 0;
9 | }
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/configs/action.js:
--------------------------------------------------------------------------------
1 | // action.type 常量
2 | export const INCREMENT = 'INCREMENT';
3 | export const DECREMENT = 'DECREMENT';
4 | export const CLEAR_NUM = 'CLEAR_NUM';
5 | export const TOGGLE_ALERT = 'TOGGLE_ALERT';
6 | export const REQUEST_DATA = 'REQUEST_DATA';
7 | export const RECEIVE_DATA = 'RECEIVE_DATA';
8 | export const FETCH_DATA = 'FETCH_DATA';
9 | export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED';
10 | export const TOGGLE_ALERT_ASYNC = 'TOGGLE_ALERT_ASYNC';
11 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/containers/sample/sample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 | import action from '../../actions/index';
4 | import NumberComponent from '../../components/number/number';
5 | import AlertComponent from '../../components/alert/alert';
6 | import FetchDataComponent from '../../components/fetchData/fetchData';
7 | import './sample.pcss';
8 |
9 | class Sample extends Component {
10 |
11 | handleClickAdd = () => {
12 | this.props.incrementNum();
13 | };
14 |
15 | handleClickMinux = () => {
16 | this.props.decrementNum();
17 | };
18 |
19 | handleClickClear = () => {
20 | this.props.clearNum();
21 | };
22 |
23 | handleClickAlert = () => {
24 | this.props.toggleAlert();
25 | };
26 |
27 | handleClickFetchData = () => {
28 | this.props.fetchDataAction(1);
29 | };
30 |
31 | render() {
32 | const {
33 | number,
34 | showAlert,
35 | fetching,
36 | data,
37 | } = this.props;
38 |
39 | return (
40 |
20 |
21 |
22 |
23 |
24 |
41 |
58 | );
59 | }
60 | }
61 |
62 | export default connect((state) => ({
63 | number: state.changeNumber.number,
64 | showAlert: state.toggleAlert.showAlert,
65 | fetching: state.fetchData.fetching,
66 | data: state.fetchData.data,
67 | }), {
68 | incrementNum: action.number.incrementNum,
69 | decrementNum: action.number.decrementNum,
70 | clearNum: action.number.clearNum,
71 | toggleAlert: action.alert.toggleAlert,
72 | fetchDataAction: action.fetchDataAction.fetchDataAction,
73 | })(Sample);
74 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/containers/sample/sample.pcss:
--------------------------------------------------------------------------------
1 | .wrap {
2 | margin: 20px;
3 | font-size: 18px;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/src/reactReduxSaga/entries/reactReduxSaga.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 | import { createStore, applyMiddleware, compose } from 'redux';
5 | // import { createLogger } from 'redux-logger';
6 | import createSagaMiddleware from 'redux-saga';
7 | import { Provider } from 'react-redux';
8 | import reducer from '../reducers/index';
9 | import Sample from '../containers/sample/sample';
10 | import rootSaga from '../sagas';
11 |
12 | // const logger = createLogger();
13 | const saga = createSagaMiddleware();
14 |
15 | const store = createStore(reducer, compose(
16 | applyMiddleware(saga),
17 | window.devToolsExtension ? window.devToolsExtension() : (f) => f,
18 | ));
19 |
20 | saga.run(rootSaga);
21 |
22 | render(
23 | recat redux saga
42 |{ data !== null ? data.msg : '' }
57 |