Action creators are exactly that—functions that create actions. It's easy to conflate the terms “action” and “action creator”, so do your best to use the proper term.
In Redux, action creators simply return an action:
. Remember that actions only describe the fact that something happened, but don't describe how the application's state changes.
Reducers specify how the application's state changes in response to actions sent to the store.
Remember that actions only describe the fact that something happened, but don't describe how the application's state changes.
This tutorial is for people who is completely new to Redux and haven't disptched any action yet :-) .
When we start to learn some new programming language or framework usually the first thing we about to do is to write "Hello world" , in other words to perform some tiny task .So to say "Hello World" in Redux would be equal to
dispatch a simple action . But somehow for me it wasn't an easy task at all .Actually I had spent quite a lot of time before I finally succeeded to dispatch my first action.My thoughts was kind of "Should I write Action first or Reducer first?
If I write action and reducer how my React component supposed to know about both of them ?How all this works under the hood ?And so on... ".Dan in his video shows several ways how to connect React Component to Redux and it's
made me even more confused about everything.
Later ,when I was writing quite big application with React-Redux I realised what generally there is no need to know what's going on under the hood and to connect Redux to React enought to know only one method .
And in order to dipatch action there is quite clear sequence of steps which I am going to outline below.Well this is my personall opinion and probably a lot of expirience developers wouldn't agry with me.
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 as plain object.
So here sayHello-action creator function.
export const sayHello = () => ({
type: "HELLO_REACT"
})
2 Next step is to write reducer for our action.
const reducer = (state = {}, action) => {
switch (action.type) {
case 'HELLO_REACT':
return { ...state, say : 'Hello World Redux' };
default:
return state;
}
};
export default reducer;
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'
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 = (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'
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 .
