If you haven’t already read Part I, be sure to catch up with all the action here before you catch this next installment of our hero’s adventures.
Here’s the recap:
In our last adventure, we met Redux’s hero, Secret Agent, who will guide us through a greater understanding of her government’s secret Redux product. We found out to know all of Redux’s secrets, we’ll need four things:
The Secret agent, herself. To do her job, she’ll need two things a) the current state of her government and b) What action she should take to carry out her mission.
We also found out that Secret Agent’s code name is Reducer. In addition, she nicknames her employer, the source of all knowledge, the State. She calls the deed she is to carry out the Action.
Our Secret Agent’s secret vault of knowledge she services with her efforts is nicknamed the Store.
Secret Agent, aka the Reducer, needs to be able to communicate with the Store. Her communication method is code-named Subscribe.
Lastly, when the Reducer is given the final “ok” to carry out her Action, she gets the Dispatch signal.
So now, as I promised you last week, I’ll reveal to you the secret code that makes all these four steps possible.
Make a new React app using create-react-app redux-demo
In your app.js file delete all the code in the “return” section and just render the ReduxDemo component (which we’ll build in a moment). Your app.js will look like this:
import React from 'react';
import ReduxDemo from './ReduxDemo'
function App() {
return (
<div className="App">
<ReduxDemo />
</div>
);
}
export default App;
In your src folder, make a new file “Redux Demo.js”
In the command line, add the redux package to your app:
npm install redux
In your ReduxDemo.js file, set up a class component and import createStore like below:
import React, { Component } from 'react'
import { createStore } from 'redux'
export default class ReduxDemo extends Component {
render() {
return (
<div>
<p>Hi From Redux</p>
</div>
)
}
}
Now comes the fun stuff. Let’s get Redux moving:
STEP 1: Create a store with a Reducer and State inside of the render method in your ReduxDemo.js file:
import React, { Component } from 'react'
import { createStore } from 'redux'
export default class ReduxDemo extends Component {
render() {
// Step 1 Create Store with reducer and state
const store = createStore(reducer, "Peace")
return (
<div>
<p>Hi From Redux</p>
</div>
)
}
}
STEP 2: Create a Reducer which needs State and Action: See notes below.
import React, { Component } from 'react'
import { createStore } from 'redux'
export default class ReduxDemo extends Component {
render() {
// Step 2 Create the reducer which needs state and action
const reducer = ( state, action ) => {
if( action.type === "ATTACK" ) {
return action.payload
}if ( action.type === "GREENATTACK" ) {
return action.payload
}
return state;
}
// Step 1 Create Store with reducer and state
const store = createStore(reducer, "Peace")
return (
<div>
<p>Hi From Redux</p>
</div>
)
}
}
First note that this new step is written BEFORE STEP 1.
Note that we gave Reducer two actions: “ATTACK” and “GREENATTACK” (for an eventual invasion of Martians).
Note that each action has a .type attribute.
Also note each action returns action.payload. In the real world, a payload is what stuff is being carried in a truck or an airplane. This payload is valuable freight that serves some purpose. For Redux, payload represents the same idea. But instead of physical items, a Redux payload is bundles of information that we’ll need to carry out our state changes.
After Reducer accomplishes all of her actions, she returns state, (see the last line of const Reducer in this step), the result of all she has done.
STEP 3. Now we’ll make that communication happen. Let’s set up Subscribe:
import React, { Component } from 'react'
import { createStore } from 'redux'
export default class ReduxDemo extends Component {
render() {
// Step 2 Create the reducer which needs state and action
const reducer = ( state, action ) => {
if( action.type === "ATTACK" ) {
return action.payload
}if ( action.type === "GREENATTACK" ) {
return action.payload
}
return state;
}
// Step 1 Create Store with reducer and state
const store = createStore(reducer, "Peace")
// Step 3 Subscribe
store.subscribe(() => {
console.log("Store is now", store.getState())
})
/
return (
<div>
<p>Hi From Redux</p>
</div>
)
}
}
Notice that for now we just threw in a console.log to make sure we’re connected.
STEP 4. Last step! Now let’s dispatch those actions:
import React, { Component } from 'react'
import { createStore } from 'redux'
export default class ReduxDemo extends Component {
render() {
// Step 2 Create the reducer which needs state and action
const reducer = ( state, action ) => {
if( action.type === "ATTACK" ) {
return action.payload
}if ( action.type === "GREENATTACK" ) {
return action.payload
}
return state;
}
// Step 1 Create Store with reducer and state
const store = createStore(reducer, "Peace")
// Step 3 Subscribe
store.subscribe(() => {
console.log("Store is now", store.getState())
})
//Step 4: Dispatch action
store.dispatch({type: "ATTACK", payload: "Iron Man"})
store.dispatch({ type: "GREENATTACK", payload: "Green Attack" })
return (
<div>
<p>Hi From Redux</p>
</div>
)
}
}
We used the store.dispatch method. Inside this method, we put an object with two key/value pairs each. Each dispatch object has a “type” key and a “payload” key.
So that is our basic setup for Redux.
In STEP 1 we created a store using the createStore method and assigned it to a variable “store”
In STEP 2, we created a reducer function that took two parameters: state and action. In our case, we had two possible actions, “Attack” and “Greenattack”. Our reducer function returned to us the final state with any alterations to state our actions might have made.
In STEP 3, we established the communication link using store’s subscribe method.
in STEP 4, we dispatched our actions using store’s dispatch method. That dispatch method took an object with a key/value pair type/ .
That was quite a bit of work for today, we’ll let Secret Agent take a break now. Stay tuned, however, for more of her adventures!
Top comments (0)