From 7e8d2d51f8eeed261a9e4af6451a6d48ccf4f7f5 Mon Sep 17 00:00:00 2001 From: Iuga Mihai Date: Mon, 21 Oct 2019 22:11:09 +0300 Subject: [PATCH 1/2] message --- src/containers/container1.js | 37 ++++++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/src/containers/container1.js b/src/containers/container1.js index 18a1381..83e6630 100644 --- a/src/containers/container1.js +++ b/src/containers/container1.js @@ -1,25 +1,34 @@ import React, {Component} from 'react'; class Cotainer1 extends Component { - Arr1 = [ - {id:1, text: 'text 1', number: 1}, - {id:2, text: 'text 2', number: 2}, - {id:3, text: 'text 3', number: 3}, - {id:4, text: 'text 4', number: 4}, - {id:5, text: 'text 5', number: 5} - ] + constructor(props) { + super(props) - renderListItem = (props) => ( -
- {props.item.text} -

{props.item.number}

-
- ) + this.handleChange = this.handleChange.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + state = { + value: '' + } + + handleChange(event) { + this.setState({ value: event.target.value}) + } + handleSubmit(event) { + event.preventDefault() + console.log(this.state.value) + } render(){ return(
- {this.Arr1.map((item, index) => ())} + {this.state.value} +
+ + + +
) } From a8bcf2d1ebc57132399fc3f8ec4e6e6622f45d29 Mon Sep 17 00:00:00 2001 From: Iuga Mihai Date: Mon, 21 Oct 2019 22:55:10 +0300 Subject: [PATCH 2/2] redux --- package-lock.json | 35 ++++++++++++++++++++ package.json | 4 ++- src/containers/container1.js | 51 +++++++++++++++--------------- src/index.js | 11 ++++++- src/store/actions/actions.js | 21 ++++++++++++ src/store/actions/actions_types.js | 3 ++ src/store/reducers/reducer1.js | 24 ++++++++++++++ 7 files changed, 122 insertions(+), 27 deletions(-) create mode 100644 src/store/actions/actions.js create mode 100644 src/store/actions/actions_types.js create mode 100644 src/store/reducers/reducer1.js diff --git a/package-lock.json b/package-lock.json index 7d1e2fe..f5ee760 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6062,6 +6062,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", @@ -10576,6 +10584,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" }, + "react-redux": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz", + "integrity": "sha512-QsW0vcmVVdNQzEkrgzh2W3Ksvr8cqpAv5FhEk7tNEft+5pp7rXxAudTz3VOPawRkLIepItpkEIyLcN/VVXzjTg==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-scripts": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.2.0.tgz", @@ -10690,6 +10711,15 @@ "minimatch": "3.0.4" } }, + "redux": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.4.tgz", + "integrity": "sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -12090,6 +12120,11 @@ "util.promisify": "~1.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 2c2d789..f99fb4f 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "dependencies": { "react": "^16.10.2", "react-dom": "^16.10.2", - "react-scripts": "3.2.0" + "react-redux": "^7.1.1", + "react-scripts": "3.2.0", + "redux": "^4.0.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/containers/container1.js b/src/containers/container1.js index 83e6630..fc4c214 100644 --- a/src/containers/container1.js +++ b/src/containers/container1.js @@ -1,37 +1,38 @@ import React, {Component} from 'react'; -class Cotainer1 extends Component { - constructor(props) { - super(props) - - this.handleChange = this.handleChange.bind(this) - this.handleSubmit = this.handleSubmit.bind(this) - } +import * as ACTION_TYPES from '../store/actions/actions_types' +import * as ACTIONS from '../store/actions/actions' - state = { - value: '' - } - - handleChange(event) { - this.setState({ value: event.target.value}) - } - handleSubmit(event) { - event.preventDefault() - console.log(this.state.value) - } +import { connect } from 'react-redux' +class Cotainer1 extends Component { + render(){ return(
- {this.state.value} -
- - - -
+ + + + +
) } } -export default Cotainer1 \ No newline at end of file +function mapStateToProps(state) { + return { + stateprop1: state.stateprop1 + } +} + +function mapDispatchToProps(dispatch) { + return { + action1: () => dispatch(ACTIONS.SUCCESS), + action2: () => dispatch(ACTIONS.FAILURE), + action_creator1: () => dispatch(ACTIONS.success()), + action_creator2: () => dispatch(ACTIONS.failure()) + } +} + +export default connect(mapStateToProps, mapDispatchToProps) (Cotainer1) \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1375f5b..cb916aa 100644 --- a/src/index.js +++ b/src/index.js @@ -2,5 +2,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App' -ReactDOM.render(, document.getElementById('root')); +import { Provider } from 'react-redux'; +import rootReducer from './store/reducers/reducer1'; +import { createStore } from 'redux'; + +let store = createStore(rootReducer) + +ReactDOM.render( + + , + document.getElementById('root')); diff --git a/src/store/actions/actions.js b/src/store/actions/actions.js new file mode 100644 index 0000000..85e6d6e --- /dev/null +++ b/src/store/actions/actions.js @@ -0,0 +1,21 @@ +import * as ACTION_TYPES from './actions_types' + +export const SUCCESS = { + type: ACTION_TYPES.SUCCESS +} + +export const FAILURE = { + type: ACTION_TYPES.FAILURE +} + +export const success = () => { + return { + type: ACTION_TYPES.SUCCESS + } +} + +export const failure = () => { + return { + type: ACTION_TYPES.FAILURE + } +} \ No newline at end of file diff --git a/src/store/actions/actions_types.js b/src/store/actions/actions_types.js new file mode 100644 index 0000000..bcbe256 --- /dev/null +++ b/src/store/actions/actions_types.js @@ -0,0 +1,3 @@ +export const SUCCESS = "SUCCESS" + +export const FAILURE = "FAILURE" \ No newline at end of file diff --git a/src/store/reducers/reducer1.js b/src/store/reducers/reducer1.js new file mode 100644 index 0000000..e19c59b --- /dev/null +++ b/src/store/reducers/reducer1.js @@ -0,0 +1,24 @@ +import * as ACTION_TYPES from '../actions/actions_types' + +const initialState = { + stateprop1: false +} + +const rootReducer = (state = initialState, action) => { + switch(action.type){ + case ACTION_TYPES.SUCCESS: + return { + ...state, + stateprop1: true + } + case ACTION_TYPES.FAILURE: + return { + ...state, + stateprop1: false + } + default: + return state + } +} + +export default rootReducer \ No newline at end of file