Creating Reducers in Redux

function reducer(state, action) {
switch (action.type) {
case "counter/increment":
return { count: state.count + 1 };
case "counter/decrement":
return { count: state.count - 1 };
default:
return state;
}
}

Reducers and Some Rules

  • They should only calculate the new state value based on the state and action arguments
  • They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
  • They must not do any asynchronous logic or other “side effects”
  • Logging a value to the console
  • Saving a file
  • Setting an async timer
  • Making an AJAX HTTP request
  • Modifying some state that exists outside of a function, or mutating arguments to a function
  • Generating random numbers or unique random IDs (such as Math.random() or Date.now())

Reducers and Updates

  • It causes bugs, such as the UI not updating properly to show the latest values
  • It makes it harder to understand why and how the state has been updated
  • It makes it harder to write tests
  • It breaks the ability to use “time-travel debugging” correctly
  • It goes against the intended spirit and usage patterns for Redux

--

--

--

A software engineering student at Flatiron School.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Native Meetup by GeekyAnts

Daily Notes React Native, JavaScript, XCODE, android Gradle

Simplest way to find react component re-rendering

Debugging React Native application WebView

useEffect() Lifecycle Method in React Hooks

Do We Really Need @ and & Bindings in AngularJS?

Tutorial: Javascript End to End Testing with Cypress

How Whelan Became a Vue.JS

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
Jessica Sewell

Jessica Sewell

A software engineering student at Flatiron School.

More from Medium

Configure Jest and Babel to test a simple React App

React Context Get Data From API

Getting Started with Redux

Easy Custom API Hook — React