article finished

simpleRedux.txt

@@ -18,7 +18,7 @@ Reducers specify how the application's state changes in response to actions sent
    So hopefully I'll save some time to wanna be a React-Redux developers. 
    
    1 . We have to write an 'ACTION CREATOR' function first.'ACTION CREATOR'-function that return Redux Action .Actions are plain JavaScript objects .And I think we have to make it  clear what when we need to create 
-   a new action  we about to write 'ACTION CREATOR' function  and not just action .
+   a new action  we about to write 'ACTION CREATOR' function  and not just action as plain object.
    So here sayHello-action creator function.
    export const sayHello = () => ({
     type: "HELLO_REACT"
@@ -39,35 +39,76 @@ const reducer = (state = {}, action) => {
    I don't want to enter in a lot of details in this tutorial about  'state' and so.I just want you to pay attention to the 'action.type' ,which we use in reducer .
  
    3 Last step but most chalenging is to pass our Redax to React component.For this porpose I will use function 'connnect' and  two another functions related to connect  ' mapDispatchToProps'  
-   and  'mapStateToProps'
+   and  '' 'mapStateToProps'
    
-   let Button = ({ whatsUp, saySomething }) => (
+import React from 'react'
+import { connect } from 'react-redux'
+import { sayHello } from '../actions'
+
+let Button = ({ whatsUp, stateObject, saySomething }) => (
   <div >
     <button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button>
     <h2>{whatsUp}</h2>
+    <button onClick={() => console.log(stateObject)} >Press to inspect STATE in console panel</button>
   </div>
 )
 
 const mapStateToProps = (state) => ({
   whatsUp: state.say,
+  stateObject: state
 })
 
-const mapDispatchToProps = {
-  saySomething: sayHello
-}
+const mapDispatchToProps = (dispatch) => ({
+  saySomething: () => { dispatch(sayHello()) }
+})
 
 Button = connect(
   mapStateToProps,
   mapDispatchToProps
 )(Button)
-
 export default Button;
 
  I don't see any use in understanding how 'connect ' works under the hood .I think it's quite enough to know the syntax  and that's it .But two another function ' mapDispatchToProps'  
    and  'mapStateToProps' very usefull and it's really impotant to know kow to pass props and how to dispatch action using this two function.
    Because main point of this tutorial just to dispatch a tiny action I will only shortly explain that's going on in our component <Button>.
- 
-  
    
-  
- 
+Function mapStateToProps (the first function you pass to connect) gets passed the whole store as parametr, its job is to map specific parts of the state to the component. 
+So only what is returned from mapStateToProps will be mapped as a prop to your component.In our example mapStateToProps return object with two properties 'whatsUp'   
\ No newline at end of file
+ and  'stateObject'. Then  <Button> will have the props 'whatsUp'   and  'stateObject' mapped from our redux state.
+ In addition to reading the state, container components(components ) can dispatch actions. In a similar fashion, 
+ you can define a function called mapDispatchToProps() that receives the dispatch() method and returns callback props that you want to inject into the presentational component.
+ So we will pass 'saySomething' as props to <Button >  component
+   In this case it's possible to use Shorthand Notation of mapDispatchToProps
+const mapDispatchToProps = {
+  saySomething: sayHello
+}
+ 
+ So once again .We have to connect <Button > component to our Redax store in other words  <Button> should know 'state' or part of 'state' and know how to dispatch actions.For this we use two
+ function  ' mapDispatchToProps'  and  'mapStateToProps' .Both of this two function return plain object and properties of this to objects we pass as props to <Button>.And function 'connect' will finish the magic.
+ I think to start developing React Redax App  it's enough to know only syntax of  ' connect'  : ContainerComponent = connect(mapStateToProps, mapDispatchToProps)(ContainerComponent) that's it .
+ 
+ 
+ Let's have a quick look  at the file structure of this example .Here I use quite popular pattern of dividing all components  into two categories: Container and Presentational components.So we have containers folder
+ and components folder .In a few words Container components know about Redax and Presentational components know nothing about Redax.And I think it's good idea from the begining to use 
+ proper folder structure
+
+src/
+  components/    
+  containers/
+  actions/
+  reducers/
+  css/
+  index.html
+   index.js
+	
+	  From my expirience the best way to learn some new tehnology is to start playing with code ,make some small changes ,add something small  , check out each time how everything works on so on .So I would 
+	  suggesst you to clone my repo from https://github.com/Lavitr/basic-react-redux-webpack4-boilerplate and start plain with code .
+	  After you clone repo run in you git console command :
+	cd basic-react-redux-webpack4-boilerplate 
+npm install
+npm start
+open http://localhost:8080  (should start automatically ) .
+
+ This repo is kind of a simple boilerplate to start developing React Redux App with Webpack4 .In this packed I've also included some additional packages for developing Async Redax App with Thunk.I'll use it in my next tutorial.
+ English is not my native language, probably you'll sport some language mistakes.I would be happy if you could correct me.And generally I would really appreciate any feedback doesn't matter positive or negative .
+ Thanks for reading!
\ No newline at end of file

src/containers/Button.js

@@ -2,24 +2,24 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { sayHello } from '../actions'
 
-let Button = ({ whatsUp, state, saySomething }) => (
+let Button = ({ whatsUp, stateObject, saySomething }) => (
 
   <div >
     <button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button>
     <h2>{whatsUp}</h2>
-    <button onClick={() => console.log(state)} >Press to inspect STATE in console panel</button>
+    <button onClick={() => console.log(stateObject)} >Press to inspect STATE in console panel</button>
   </div>
 
 )
 
 const mapStateToProps = (state) => ({
   whatsUp: state.say,
-  state: state
+  stateObject: state
 })
 
-const mapDispatchToProps = {
-  saySomething: sayHello
-}
+const mapDispatchToProps = (dispatch) => ({
+  saySomething: () => { dispatch(sayHello())}
+})
 
 Button = connect(
   mapStateToProps,