logo
down
shadow

React Native - Redux ~ Props updating when not getting called


React Native - Redux ~ Props updating when not getting called

By : Anju
Date : October 21 2020, 08:10 AM
this one helps. The issue lay within all of my reducers.
At the end of each reducer case statement I did a default which set the state to be the initialState which was defined at the top of the reducer.
code :
const modalsReducer = (state = initialState, action) => {
  switch (action.type) {
      case SHOW_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: true
          };
      case HIDE_ADD_ROOM_MODAL:
          return {
              ...state,
              addRoomModalVisible: false
          };
      default:
          return state;
  }

};


Share : facebook icon twitter icon
react/redux:Get the latest props value from state after updating props with dispatch right away

react/redux:Get the latest props value from state after updating props with dispatch right away


By : mark
Date : March 29 2020, 07:55 AM
hop of those help? I put all states on redux store, don't use local state anymore, use mapStateToProps make state as props, then get the latest value from it. It is the best practice I think:
code :
  handleChange(event) {
    event.preventDefault();
    this.props.selectLayoutAction(event.target.value);
    this.props.resetStyles();
  }

  handleThemeChange(event) {
    event.preventDefault();
    this.props.setLayoutThemeAction({
      name: this.props.selectLayout,
      currentTheme: event.target.value
    });
  }

  render() {
      const { layouts, selectLayout } = this.props;
      let layoutsList = List(layouts);
      let currentTheme = '';

      if (layouts && layouts.get) {
        let targetLayout = layouts.find((layout) => layout.get('name') === selectLayout);
        currentTheme = targetLayout.get('currentTheme');
      }

      return (
        <div>
          <select onChange={this.handleChange.bind(this)} value={selectLayout}>
            {this.renderOptions(layoutsList)}
          </select>

          <select onChange={this.handleThemeChange.bind(this)} value={currentTheme}>
            {this.renderThemeOptions(selectLayout, layouts)}
          </select>
        </div>
      );
    }



function mapStateToProps(state) {
  console.log('Update selectLayout!!! ', state.selectLayout);
  syncSelectLayout = state.selectLayout;
  return {
    layouts: state.layouts,
    selectLayout: state.selectLayout
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectLayoutAction, setLayoutThemeAction, resetStyles }, dispatch);
}
React Native Redux: props not updating after API call

React Native Redux: props not updating after API call


By : Lathish Kumar KC
Date : March 29 2020, 07:55 AM
will be helpful for those in need It turned out to be because of the quotes in 'TOKEN_GET_FAIL'
That is a string and not the const I need. So I changed to TOKEN_GET_FAIL and it works.
How to map state to props in redux in react native

How to map state to props in redux in react native


By : NIRAN BARO
Date : March 29 2020, 07:55 AM
I hope this helps you . This is because in your index.ios.js file while creating the redux store, you are name-spacing this data under userReducers.
react props not updating with redux store

react props not updating with redux store


By : Ali Hamza
Date : March 29 2020, 07:55 AM
hop of those help? I've always used react-redux connect to configure props but I need to use a react Component to use lifecycle methods. I'm noticing that my props that I'm grabbing from the store seem to be static and they do not update as the store updates. , It should be something like this. In your Confirmation component:
code :
const mapStateToProps = (state) => {
  return { modalActive: state.confirmation.modalActive };
}

export default connect(mapStateToProps)(Confirmation);
const rootReducer = combineReducers({
  confirmation: ConfirmationReducer
});
import { ON_CONFIRM } from '../actions';

const INITIAL_STATE = {modalActive: true};
export default function(state = INITIAL_STATE, action) {
  console.log(action);
  switch (action.type) {
    case ON_CONFIRM:
      return { ...state, modalActive: action.payload };
  }

  return state;
}
{this.props.modalActive}
React Redux: Getting Props And Updating State

React Redux: Getting Props And Updating State


By : Matt
Date : March 29 2020, 07:55 AM
will help you Instead of setting state with array I am now setting with object. I guess I was putting lightOn object in light array which was making it inaccessible.
action:
code :
export const setLight = lightStatus => dispatch => {
  dispatch({ type: SET_LIGHT, payload: lightStatus });
};
import { SET_LIGHT } from '../actions/types';

export default function(state = { on: false }, action) {
  console.log('state ', state);
  switch (action.type) {
    case SET_LIGHT:
      return { ...state, on: action.payload };
    default:
      return state;
  }
}
import React, { Component } from 'react';
import { connect } from 'react-redux';
//import * as actions from '../actions';
import { setLight } from '../actions';
import { bindActionCreators } from 'redux';

class Light extends Component {
  render() {
    return (
      <div>
        Light On: {this.props.light.on.toString()}
        <button
          className="btn"
          onClick={() => this.props.setLight(!this.props.light.on)}
        >
          Set Light!
        </button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { light: state.light };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ setLight: setLight }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Light);
Related Posts Related Posts :
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • Strage Vue behaviour. V-if does not watch properly
  • Is it possible to use map/filter/reduce inside a promise by returning the result with Promise.resolve?
  • Does EcmaScript have any rule where whitespace is important for the compiler during parsing
  • How is DOM and Virtual DOM represented in memory?
  • cannot display text onchange select option
  • My gulpfile can edit (change) and delete file, but dont copy new (add) files
  • How do I reset scroll position of paper-dialog-scrollable?
  • Loading unlooped gif-animation several times
  • Strange error from Google API: initializeAutocomplete is not a function
  • Array state variable is not being set during componentWillMount
  • Stop refresh on form submit when using javascript
  • Npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please
  • Cant get wheel scroll delta on Firefox
  • Puppeteer with Prompt, ignoring rest of function
  • VueJS Form Input Binding
  • How To Extend mail.Chatter Widget in Javascript Odoo 10
  • How Chk two checkboxes at a time using jQuery
  • Broken "if" statement in JavaScript code…
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org