Change style onPress + Redux

I want to change the style of the entire app when a button is pressed. I thought I can do this with a reducer. So I created:

ReducerStyles:

const initialState = 
        {
            name: styleNormal,
            path: './styles/styleNormal'
        }


export default function reducer01 (state = initialState, action) {
      switch (action.type) {
        case "changeStyleNormal":
             return [
                ...state,
                {
                name: name: action.payload,
                path: './styles/styleNormal'
                }
             ];

        case "changeStyleNew":
             return [
                ...state,
                {
                name: name: action.payload,
                path: './styles/styleNew'
                }
             ];

        default:
          return state
      }
    }

And Actions:

const CHANGE_STYLE_NORMAL = 'changeStyleNormal';
const CHANGE_STYLE_NEW = 'changeStyleNew';

export function changeStyleNormal(style){
    return {
        type: CHANGE_STYLE_NORMAL,
        payload: style
    }
}

export function changeStyleNew(style){
    return {
        type: CHANGE_STYLE_NEW,
        payload: style
    }
}

I created 2 styles in the styles folder so only 1 can be applied depending on the one selected/returned from the reducer. By default I have the styleNormal in the Reducer initialState. Imported the Actions, Reducer is combined and mapStateToProps:

function mapStateToProps(state) {
  return {
      style: state.style
  }
}


function mapDispatchToProps(dispatch) {
  return {
    changeStyleNormal: (style) => {
      dispatch(changeStyleNormal(style));
    },
    changeStyleNew: (style) => {
      dispatch(changeStyleNew(style));
    }
  }
}

Added 2 buttons:

    <TouchableOpacity 
      style={styles.clickMe}
      onPress={()=>this.props.changeStyleNew('styleNew')}>
      <Text style={styles.black18}>New Style</Text>
    </TouchableOpacity>


    <TouchableOpacity 
      style={styles.clickMe}
      onPress={()=>this.props.changeStyleNormal('styleNormal')}>
      <Text style={styles.black18}>Normal Style</Text>
    </TouchableOpacity>

Now when the component is called,

render() {
 console.log("style: ",this.props.style);

This gives the style as:

I cannot access this.props.style out of the render() so where would I set the var style = this.props.style.path ?

Also, when I click any button, the actions are fine, but the styles are getting appended to the reducer:

I want only the one passed to be in the reducer. So I can use it to set the style.

Is this the proper way to do it? Please help.

Many thanks.

UPDATE 1:

class Ext2 extends Component {

//console.log('Style:', this.props.people);  // <= This throws an internal server error 500
// const styles = this.props.style.path;  // same error as above

    render() {
     console.log("style: ",this.props.style);   //<= Works
     console.log("stylePath: ",this.props.style.path)  //<= Works