How to Decouple from redux easily? - reactjs

Question

I want to be able to move from Redux easily (use another flux-like implementation) or reuse our React components to create dynamic views, what distinction should I do and how can I implement this idea? You can use the Dashboard class to illustrate.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// fetches projects from a remote server using Redux actions
import { fetchProjects } from '../../ducks/projects';
export class Dashboard extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
isFetching: PropTypes.bool.isRequired,
projects: PropTypes.array.isRequired
};
// Voluntarily obfuscated
componentXXX() {
this.fetchData();
}
fetchData() {
const { dispatch, status } = this.props;
dispatch(fetchProjects({ status }));
}
render() {
const { isFetching, projects } = this.props;
return <ProjectsPane projects={projects} isFetching={isFetching} />;
}
}
function mapStateToProps(state) {
const { isFetching, projects } = state;
return {
isFetching,
projects
};
}
export default connect(mapStateToProps)(Dashboard);
export class ProjectsPane extends Component {
// ...
}

Answer 1

One thing you can do in Redux applications is separate your connected (container) components from presentational components. Dan Abramov, the author of Redux, has a great article on this pattern here. To sum it up, you build your presentational component with no knowledge of Redux. It gets its data through props and requests its data through callback props (ex. this.props.onNeedData()). In your example, your Dashboard component is close to being a presentational component already. You can take it a bit further by using mapDispatchToProps to pass in the fetchProjects function as a callback prop. You can read more about the mapDispatchToProps argument here. Additionally, I would follow Dan's advice and start by connecting the top-level component and pass data/callbacks down through props until that becomes less manageable and you need to connect other components. This will help in minimizing how much of your code is aware of Redux.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// fetches projects from a remote server using Redux actions
import { fetchProjects } from '../../ducks/projects';
export class Dashboard extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
isFetching: PropTypes.bool.isRequired,
projects: PropTypes.array.isRequired
};
// Voluntarily obfuscated
componentXXX() {
this.fetchData();
}
fetchData() {
const { onNeedData, status } = this.props;
onNeedData({ status });
}
render() {
const { isFetching, projects } = this.props;
return <ProjectsPane projects={projects} isFetching={isFetching} />;
}
}
function mapStateToProps(state) {
const { isFetching, projects } = state;
return {
isFetching,
projects
};
}
const mapDispatchToProps = {
onNeedData: fetchProjects
};
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
Also, it is worth evaluating your project and deciding if you really need Redux. Are you using Redux because you have evaluated the cost and benefits of it and saw that it would be a positive for your project? A lot of React tutorials around the web make it seem like you can't build a React project without Redux or some state management, but React's state management is pretty good out of the box. In fact, Dan Abramov has an article title You Might Not Need Redux that is worth checking out.