Assumptions:
- you've installed Redux and have the
store.js
file setup you want a suggestion as to a ‘logical’ flow for when to write
actions
,reducers
,component
integrationNote: You don’t need to do any of these steps in order but you do need to do each step. Try this method and make up your own method as you go forward.*
Step 1 - Create Stateless Components and the GUI
Start with hard-coded data for the time being.
I’ve found making components this way forces me to think more about their relationships, what the state looks like, and what components could get reused.
Step 2 - Add Boilerplate
In the component(s) needing state or props, add the redux boiler plate code and don't worry if they're empty now:
// SomeCoolComponent.js file
import {connect} from 'react-redux' // every component using mapState or mapDispatch needs this
const SomeCoolComponent = ( { destructuredPropsHere} ) = {
// component code…...
}
// add the 3 boiler plate lines below at end of file
const mapStateToProps = state => ({ } )
const mapDispatchToProps = dispatch => ( { })
export default connect(mapStateToProps, mapDispatchToProps)(TheParentComponentNameHere);
Step 3 - Create a Redux Folder Structure
Add
./src/redux/
folder to group yourstore.js
,reducers.js
, andactions.js
together. This makes it easier to find items and keep focused.If you have a lot of
actions
orreducers
, create a sub-folder and divide theactions
andreducers
into related files. For example,fetchActions.js
,addToCartActions.js
, or aloginReducer.js
.
Step 4 - Create Your Action(s) and Actions Creator(s)
For example:
// actions
export const ISCOMPLETED_TODO = "ISCOMPLETED_TODO"
export const ADDSINGLEITEM = "ADD_SINGLE_ITEM_TO_STATE"
// action creators
export const setSingleItem = (item) => ({
type: ADDSINGLEITEM,
payload: item
})
export const markToDoAsComplete = (text) => ({
type: ISCOMPLETED_TODO,
payload: {text}
})
While very optional, action creators let you easily reuse the object they create. If it seems redundant, it is, on a small scale; but in a larger code base, just type in the action creator name and you get the object.
Step 5 - Create or Update Reducer(s) with Action(s)
- Import your ‘actions’ if you are using them (‘actions’ differ from ‘action creators’ )
- Create your a
switch
statement or update aswitch
with a newcase
statement - Every
case
needs areturn
with the new state *Remember to include adefault: return state
for yourswitch
For example:
import {
CREATE_TODO,
REMOVE_TODO,
ISCOMPLETED_TODO,
} from "./actions";
export const toDos = (state = [], action) => {
const {
type,
payload,
} = action;
switch (type) {
// other cases removed for space
case ISCOMPLETED_TODO: {
const { text } = payload
return state.map(toDo => {
if (toDo.text === text) {
return {...toDo, isCompleted: true}
}
return toDo
})
}
default:
return state;
}
};
Step 5 - Back in Your Component - Import & Props
- Import the appropriate
action creator(s)
- Add the appropriate
props
as destructured arguments - Add the
state
data intomapStateToProps
in object form - Add the
action creator
tomapDispatchToProps
in object shorthand form <-recommended method by Redux - Add the
state
and thecallback
function into the appropriate spot.
// ToDoList.js for a to do tracking app
// other imports omitted for clarity
import { connect } from 'react-redux'
import {
removeToDo,
markToDoAsComplete,
} from './redux/actions' // action creators, used in mapDispatch
const ToDoList = ({
toDos = [],
onRemovePressed,
markComplete
}) => {
return (
<div className="list-wrapper">
// ...some code here
{toDos.map((toDo, i) => {
return (
<ToDoListItem
toDo={toDo}
key={i}
onRemovePressed={ onRemovePressed } // callback function
markComplete={ markComplete } // callback function
/>
)}
)}
</div>
);
}
const mapStateToProps = state => ({
toDos: state.toDos,
})
const mapDispatchToProps = dispatch => (
{
onRemovePressed: text => dispatch(removeToDo(text)),
markComplete: text => dispatch(markToDoAsComplete(text))
}
)
export default connect(mapStateToProps, mapDispatchToProps)(ToDoList);
Now Finished
At this point, you should have everything correctly wired for your casual react app. While a few tutorials (see the to-do code above) help, my understanding improved when I used it for my own project app (outdoor adventure rentals).
Also, if you haven’t installed the React Developer Chrome extension (link below), install it. It gives a nice visual of your store.
Just The Steps
Step 1 - Create Stateless Components
Step 2 - Add Boilerplate
Step 3 - Create a Redux Folder Structure
Step 4 - Create Your Action(s) and Actions Creator(s)
Step 5 - Back in Your Component - Import & Props
Top comments (1)
My favorite way to use redux is
npm uninstall redux