Can Redux manage just a boolean?

redux reducer toggle boolean
why do we need redux
redux onclick
when to add redux
is redux worth it
redux store toggle
immutable js toggle boolean
redux toggle button

I have a piece of state in my React & Redux App dealing with authentication. It's a boolean.

I'd like to simplify grabbing this piece of state from the Redux store but can't find examples of this.

Is this approach a bad idea? I know that mutating state is not the correct approach. I'm not sure if this constitutes a mutation though.

import {
  AUTHENTICATED,  
  AUTHENTICATION_ERROR,
  AUTHENTICATION_REMOVE,
  UNAUTHENTICATED,
} from '../actions/types';

let INITIAL_STATE = false

export default function( state = INITIAL_STATE, action) {
  switch(action.type) {
    case AUTHENTICATED:
      return !state

    case UNAUTHENTICATED:
      return state

    case AUTHENTICATION_ERROR:
      return state

    case AUTHENTICATION_REMOVE:
      return !state

    default:
      return state;
  }
}

This is perfectly fine. Because you are not mutating anything from the state.

Yes, You are not mutating the state. Because your state is just a boolean value and you are returning the opposite value of your state. But you are not making any change to the state.

const value = true;
console.log(!value) // This will not change the value directly but it just returns false

But try to use a key in the state. In future, if you want to add some more keys. You don't have to do so many changes.

reactjs - Can Redux manage just a boolean?, and you pass in the new state to the action creator like `updateBooleanThing(​true)` to enable describing the state to move towards explicitly, but leaves it to the reducer to handle instead. - Ryan. Sign in to reply If the flag gets in a bad state, toggling it will forever be the opposite of what's it's supposed  The actions triggered just have a boolean as payload (the open state of a certain menu), so I've ruled out that an excessive payload will be the problem. I've also uninstalled and reinstalled it again, but the problem persists. I even remoded the hot module replacement for reducers just in case but it didn't fix it.

When your state is just a boolean, you aren't actually mutating the state by writing !state, since boolean, string and number values are immutable.

Also it might not be a bad idea to store just a boolean in the reducer state. However you must read You Might not need Redux to undestand more on when you should and should not use redux

Redux actions for simple booleans, We learnt this years ago, but it seems we need to re-learn it in React where the In the case of these 3 booleans, there would be 8 distinct states to handle. A better approach can be seen in the use of enums over booleans. #Redux FAQ: Organizing State #Table of Contents Do I have to put all my state into Redux? Should I ever use React's setState()? Can I put functions, promises, or other non-serializable items in my store state?

You can try this enhancer redux-named-reducers

Then your reducer is simplified to something like this:

authModule.reduce(AUTHENTICATED, { isAuthenticated: true })
authModule.reduce([UNAUTHENTICATED, AUTHENTICATION_ERROR, 
AUTHENTICATION_REMOVE], { isAuthenticated: false })

Then you can access authentication state from anywhere like this:

getState(authModule.isAuthenticated)

I'm being very strict with the authentication state here to be set only when authenticated, and unset for everything else, but you can adjust as you see fit.

How to Avoid the “Boolean Trap” When Designing React Components, [6.1.1] False boolean values are being filtered out of values #1993. Closed was cumbersome behavior with dirty/pristine/initialization management. You can't simply set anything to undefined as redux-form supports both  filterText is the controlled value of the filter text, put this on an input 's value. handleChange should be called whenever the input changes to update the filter. sorting is the same as Table; a boolean that indicates if the table is currently sorting.

[6.1.1] False boolean values are being filtered out of values · Issue , For now, don't handle any actions. // and just return the state given to us. return state. } Now let's handle SET_VISIBILITY_FILTER . All it needs to do is to change​  Redux solves these problems by using pure reducers instead of event emitters. It's unfortunate that many still choose a framework based on whether it uses switch statements in the documentation. If you don't like switch, you can use a custom createReducer function that accepts a handler map, as shown in “reducing boilerplate”. #Handling More Actions

Reducers, That one single reducer function ultimately needs to do several things: The reducer needs to handle this case by supplying a default state value before or a specialized data structure, but most libraries assume that the top-level value is a  Technically, a container component is just a React component that uses store.subscribe() to read a part of the Redux state tree and supply props to a presentational component it renders. You could write a container component by hand, but we suggest instead generating container components with the React Redux library's connect() function, which provides many useful optimizations to prevent unnecessary re-renders.

Basic Reducer Structure, It has become popular recently in applications due to the benefits it can bring. This page primarily covers adding type checking for the Redux core, and only gives shorter examples of using TS TS infers type: (state: RootState) => boolean. By the way, because the actions are bound to the store, they are just pure functions :) Now create your component. With Redux Zero your component can focus 100% on the UI and just call the actions that will automatically update the state:

Comments
  • If you're authenticated and in some way manages to authenticate again, you're not authenticated?
  • I guess this would be one edge case. However I was reading about design patterns recently and I really do believe in this saying right here. imgur.com/a/tOxt9JX
  • en.wikipedia.org/wiki/You_aren%27t_gonna_need_it