更改样式onPress + Redux

Question

我想在按下按钮时更改整个应用程序的样式。我以为我可以用reducer来做到这一点。因此，我创建：

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 
     } 
    } 

和行动：

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 
    } 
} 

我创建了2款在styles文件夹，以便只有1可以根据一个选择的应用/从返回减速器。默认情况下，我在Reducer initialState中有styleNormal。进口的操作，减速组合后mapStateToProps：

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


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

新增2个按钮：

<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> 

现在，当组件被调用时，

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

这给了风格：

我无法在render()之外访问this.props.style，因此我会在哪里设置变量style = this.props.style.path？

而且，当我点击任何按钮，动作都很好，但款式越来越附加到减速机：

我只想要一个传递是在减速。所以我可以用它来设置风格。

这是正确的方法吗？请帮忙。

非常感谢。

更新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

我无法访问this.props.style出来的渲染（）

是什么让你觉得你不能访问它？您可以从class的任何地方访问this.props。

而且，当我点击任何按钮，动作都很好，但 越来越附加到减速

你的初始状态是一个对象，但你正在返回从减速数组风格：

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

而是试图返回一个对象是这样的：

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

编辑
作为随访到您的评论，在这里是如何与一个简单的例子，你可以访问this.props的render方法外：

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>