Change style onPress + Redux - reactjs

Question

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

Answer 1

I cannot access this.props.style out of the render()
what makes you think you can't access it? you can access this.props from anywhere in the class.
Also, when I click any button, the actions are fine, but the styles
are getting appended to the reducer
Your initial state is an object yet you are returning an array from your reducers:
case "changeStyleNew":
return [
...state,
{
name: name: action.payload,
path: './styles/styleNew'
}
];
Instead try returning an object like this:
case "changeStyleNew":
return{
...state,
name: name: action.payload,
path: './styles/styleNew'
}
EDIT
As a followup to your comment, here is a simple example of how and where you could access this.props outside the render method:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: this.props.count // acess props
};
this.add = this.add.bind(this);
this.sub = this.sub.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({ count: nextProps.count });
}
add() {
this.props.addClick(); // acess props
}
sub() {
this.props.subClick(); // acess props
}
render() {
const { count } = this.state;
return (
<div>
<div>Count:{count} </div>
<button onClick={this.add}>+</button>
<button onClick={this.sub}>-</button>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.addClick = this.addClick.bind(this);
this.subClick = this.subClick.bind(this);
}
addClick() {
const nextstate = this.state.count + 1;
this.setState({ count: nextstate });
}
subClick() {
const nextstate = this.state.count - 1;
this.setState({ count: nextstate });
}
render() {
return (
<div>
<h2>Wellcome to my Counter!</h2>
<Counter
count={this.state.count}
addClick={this.addClick}
subClick={this.subClick}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>