The Ui doesn’t reflect the change after dispatching ?


#1

I am using nachos-ui in my react native application, the Switcher component

in my configScreen.js like so:

<Switcher
     onChange={((difficulty) => this.onLevelSelect(difficulty) )}
     defaultSelected={this.props.difficulty} >
     <TabButton value='medium' text='medium'  />
     <TabButton value='easy' text='easy'/>
 </Switcher>

and I have a reset button that resets the value of this.props.difficulty from the store.

everything works fine the store gets reseted and the value but the Switcher keeps indicating to the old value, unless i move to another screen then goBack to configScreen.js, at that time the change takes effect(ie: the value of defaultSelected indicates the store value.

I don’t know why the Switcher doesn’t reflect the correct value,

PS: Logging the this.props.difficulty reflects the correct value onChange and in the Store.

action/index.js :

exports.changeLevel = (select) => {
      return {
            type: 'CHANGE_LEVEL',
            select
      }  

}

exports.resetGame = () => {
      return{
            type: 'RESET_GAME',
      }
}

reducer/index.js :

module.exports = ( state = {}, action ) => {
    switch(action.type) {
        case 'RESET_GAME' : 

            return {
                ...state,
                difficulty: 'easy',
            }
        case 'CHANGE_LEVEL':
            return {
                ...state,
                difficulty: action.select
            }
        default:
            return state
    }
}

store/index.js :


import { createStore, compose } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist'; 

import reducer from '../reducer';

const defaultState = {
    difficulty: 'easy',

}


export const configureStore = (intialState = defaultState, action) =>{

    var store = createStore(reducer, intialState,compose(
        autoRehydrate()
    ));
    persistStore(store, {storage: AsyncStorage});

    return store;

}

configScreen.js :

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, Dimensions } from 'react-native';
import { Container, Header, Content, Card, CardItem,  Button, Icon, Left, Body } from 'native-base';
import { AdMobBanner } from "expo";
import DropdownAlert from 'react-native-dropdownalert';
import {changeLevel, reset, resetGame} from '../actions';
import {Switcher, TabButton, themeManager} from 'nachos-ui';
import { configureStore } from '../store';

const buttonTheme = themeManager.getStyle('TabButton');

const newButtonTheme = {
  ...buttonTheme,
  BUTTON_BACKGROUND:'#fff',
  BUTTON_BORDER_WIDTH:1,
  BUTTON_BORDER_COLOR:'#4bb29e',
  BUTTON_BORDER_RADIUS:5,
  BUTTON_HEIGHT:25,
  BUTTON_WIDTH: 10,
  BUTTON_FONT_COLOR:'black',
  BUTTON_FONT_SIZE:14,
  BUTTON_FONT_WEIGHT:'normal',
  BUTTON_FONT_FAMILY:'jf',
  BUTTON_SELECTED_BACKGROUND:'#4bb29e',
  BUTTON_SELECTED_FONT_COLOR:'white',
  BUTTON_SELECTED_BORDER_COLOR:'#4bb29e',

}
themeManager.setSource('TabButton', () => (newButtonTheme))

const screenWidth = Dimensions.get('window').width / 12;


class AboutScreen extends Component {


  componentWillUpdate(nextProps, nextState) {
    if(nextProps.difficulty !== this.props.difficulty ){
      this.setState({difficulty: this.props.difficulty})
    }
  }


  _goBack = () => {
    this.props.navigation.goBack(null)
  }

  onClose(data) {
    // data = {type, title, message, action}
    // action means how the alert was closed.
    // returns: automatic, programmatic, tap, pan or cancel
  }

  // RESET THE STORE HERE 
  onReset() { 
    this.gameReset() 
    console.log(configureStore().getState())
  }

  onLevelSelect(selected) {

    this.props.dispatch(changeLevel(selected))

  }

  gameReset() {
    this.props.dispatch(resetGame())
  }    

  render() {
    return (
      <Container style={{backgroundColor: 'white',}}>
          <Content>
            <Card>
            <CardItem>
                          <Switcher
                            onChange={((difficulty) => 
                             this.onLevelSelect(difficulty) )}
                            defaultSelected={this.props.difficulty}
                            >
                                <TabButton value='medium' text='medium'  />
                                <TabButton value='easy' text='easy'/>
                          </Switcher>
                     <CardItem>
                        <Button title='reset' onPress={() => this.gameReset()} />
            </Card>
          </Content>

      </Container>
    );
  }
}


function mapStateToProps(state) {
  return {
    difficulty: state.difficulty,
  }
}

function mapDispatchToProps(dispatch) {
    return {
        onDispatchChangeLevel: (difficulty) => dispatch(changeLevel(difficulty)),
        onDispatchResetGame: (difficulty) => dispatch(resetGame(difficulty))
    }
}

export default connect(mapStateToProps)(AboutScreen)

The Ui doesn't reflect the change after dispatching
#2

Hi! This seems like something you’ll just need to debug, not an Expo issue. It’s also pretty hard to figure out what’s wrong when there’s this much code. You’re much more likely to get help if you post a Snack with a https://stackoverflow.com/help/mcve.


closed #3

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.