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 18a1381..fc4c214 100644 --- a/src/containers/container1.js +++ b/src/containers/container1.js @@ -1,28 +1,38 @@ 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} - ] +import * as ACTION_TYPES from '../store/actions/actions_types' +import * as ACTIONS from '../store/actions/actions' - renderListItem = (props) => ( -
- {props.item.text} -

{props.item.number}

-
- ) +import { connect } from 'react-redux' +class Cotainer1 extends Component { + render(){ return(
- {this.Arr1.map((item, index) => ())} + + + + +
) } } -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