Continue to learn

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",

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) => (
-        <div>
-            {props.item.text}
-            <p>{props.item.number}</p>
-        </div>
-    )
+import { connect } from 'react-redux'
 
+class Cotainer1 extends Component {
+
  render(){
     return(
      <div>
-        {this.Arr1.map((item, index) => (<this.renderListItem key={item.id} item={item} />))}    
+         <button onClick={() => console.log(this.props.stateprop1)}> GetState</button>
+         <button onClick={() => this.props.action1()}> Dispatch Action 1</button>
+         <button onClick={() => this.props.action1()}> Dispatch Action 2</button>
+         <button onClick={() => this.props.action_creator1()}> Dispatch Action Creator 1</button>
+         <button onClick={() => this.props.action_creator2()}> Dispatch Action Creator 2</button>
      </div>
     )
   }
 }
 
-export default Cotainer1
+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) 

src/index.js

@@ -2,5 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import { Provider } from 'react-redux';
+import rootReducer from './store/reducers/reducer1';
+import { createStore } from 'redux';
+
+let store = createStore(rootReducer)
+
+ReactDOM.render(<Provider store={store}> 
+                    <App /> 
+                </Provider>, 
+                document.getElementById('root'));
 

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
+    }
+}

src/store/actions/actions_types.js

@@ -0,0 +1,3 @@
+export const SUCCESS = "SUCCESS"
+
+export const FAILURE = "FAILURE"

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