Hiding Code - Less Redux Is More

One interesting thing about the Redux pattern is how much of it can just… go away. Here we look at how.

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { fetchComments, saveComment, showNewCommentForm, likeComment } from '../actions/comments';import Comments from './Comments';function mapStateToProps(state) {
return {
comments: state.comments,
user: state.user
}
}
function mapDispatchToProps(dispatch) {
return {
fetchComments: () => {
dispatch(fetchComments());
},
saveComment: () => {
dispatch(saveComment());
},
showNewCommentForm: () => {
dispatch(showNewCommentForm());
},
likeComment: () => {
dispatch(likeComment());
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Comments);
export function fetchComments() {
return dispatch => {
return commentService.getComments()
.then(
response => dispatch(receiveComments(response.comments))
)
}
}
export function receiveComments(comments) {
return {
type: 'RECEIVE_COMMENTS',
payload: comments
};
}

Let’s Get Hacking State

function mapStateToProps(state) {
return {
comments: state.comments,
user: state.user
}
}
const mapStateToProps = state => {
return {
comments: state.comments,
user: state.user
}
}
const mapStateToProps = ({user, comments}) => {
return {
comments: comments,
user: user
}
}
const mapStateToProps = ({user, comments}) => {
return { comments, user }
}
const mapStateToProps = ({user, comments}) => {
return comments, user;
}
const mapStateToProps = ({user, comments}) => ({comments, user});
import { commentState } from '../redux/standardStates';

Taking Action

export function fetchComments() {
return dispatch => {
return commentService.getComments()
.then(
response => dispatch(receiveComments(response.comments))
)
}
}
export const fetchComments = () => {
return dispatch => {
return commentService.getComments()
.then(
response => dispatch(receiveComments(response.comments))
)
}
}
export const fetchComments = () => {
return async dispatch => {
const { comments } = await commentService.getComments();
dispatch(receiveComments(comments));
}
}
export const receiveComments = comments => {
return {
type: 'RECEIVE_COMMENTS',
payload: comments
};
}
export const receiveComments = payload => {
return {
type: 'RECEIVE_COMMENTS',
payload
};
}
export const receiveComments = payload => ({ type: 'RECEIVE_COMMENTS', payload });

Mapping Dispatch

function mapDispatchToProps(dispatch) {
return {
fetchComments: () => {
dispatch(fetchComments());
},
saveComment: () => {
dispatch(saveComment());
},
showNewCommentForm: () => {
dispatch(showNewCommentForm());
},
likeComment: () => {
dispatch(likeComment());
}
}
}
const mapDispatchToProps = dispatch => {
return {
fetchComments: () => dispatch(fetchComments()),
saveComment: () => dispatch(saveComment()),
showNewCommentForm: () => dispatch(showNewCommentForm()),
likeComment: () => dispatch(likeComment())
}
}
const mapDispatchToProps = dispatch => {
return bindActionCreators(
{fetchComments, saveComment, showNewCommentForm, likeComment},
dispatch
);
}
const myActions = {fetchComments, saveComment, showNewCommentForm, likeComment};export default connect(mapStateToProps, myActions)(Comments);
import * as CommentActions from '../actions/comments';...export default connect(mapStateToProps, CommentActions)(Comments);
import * as CommentActions from '../actions/comments';
import {logIn} from '../actions/default';
...export default connect(mapStateToProps, {...CommentActions, logIn})(Comments);

The End Result

import React from 'react';
import { connect } from 'react-redux';
import { fetchComments, saveComment, showNewCommentForm, likeComment } from '../actions/comments';import Comments from './Comments';function mapStateToProps(state) {
return {
comments: state.comments,
user: state.user
}
}
function mapDispatchToProps(dispatch) {
return {
fetchComments: () => {
dispatch(fetchComments());
},
saveComment: () => {
dispatch(saveComment());
},
showNewCommentForm: () => {
dispatch(showNewCommentForm());
},
likeComment: () => {
dispatch(likeComment());
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Comments);
import React from 'react';
import { connect } from 'react-redux';
import * as CommentActions from '../actions/comments';
import Comments from './Comments';
const mapStateToProps = ({user, comments}) => ({comments, user});export default connect(mapStateToProps, CommentActions)(Comments);
export function fetchComments() {
return dispatch => {
return commentService.getComments()
.then(
response => dispatch(receiveComments(response.comments))
)
}
}
export function receiveComments(comments) {
return {
type: 'RECEIVE_COMMENTS',
payload: comments
};
}
export const fetchComments = () => {
return async dispatch => {
const {comments} = await commentService.getComments();
dispatch(receiveComments(comments));
}
}
export const receiveComments = payload => ({type: 'RECEIVE_COMMENTS', payload});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matt Burgess

Senior Web Developer based in Bangkok, Thailand. Javascript, Web and Blockchain Developer.