如何使用react和redux递增和递减值？

在我的例子中，我有两个按钮“增量”和“减量”。我想显示增加按钮被点击时会增加的数字。当点击减量按钮时递减。如何使用react和redux递增和递减值？

这里是我的代码 https://plnkr.co/edit/UwQjdyRJhz4H3orUc3m5?p=preview

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux; 
const { Provider, connect } = ReactRedux; 
const thunk = window.ReduxThunk.default; 

const abc = (state = {}, action) => { 
    switch (action.type) { 
    case 'SET_DATA': 
     return action.payload; 
    default: 
     return state; 
    }; 
}; 
const pqr = (state = 0,action) => { 
    console.log('in redux', action.type) 
    switch(action.type){ 
    case 'INC': 

     return state +1 
    case 'DEC': 
     return state -1 
     default : 
     return state; 
    } 
} 
const cmpbind = combineReducers({ 
    abc, 
    pqr 
}) 
const store = createStore(cmpbind, applyMiddleware(thunk)); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 
    this.getData = this.getData.bind(this); 
    } 

    getData(){ 
    this.props.load(); 
    } 
    inc(){ 
    console.log('ince', this.props) 
    this.props.increment(); 
    } 

    dec(){ 
    console.log('dec') 
    this.props.decrement(); 
    } 
    render() { 
    return (
     <div> 
     <button onClick={this.getData}>GET DATA</button> 
     <pre>{JSON.stringify(this.props.data)}</pre> 

     <button onClick={this.inc.bind(this)}>INCREMENT</button> 
     <p>{this.props.digit}</p> 
     <button onClick={this.dec.bind(this)}>DECREMENT</button> 
     </div> 
    ); 
    } 
} 


const actions = { 
    load:() => { 
    return (dispatch) => { 
     return axios.get('data.json').then((response) => { 
     dispatch({ 
      type: 'SET_DATA', 
      payload: response.data, 
     }); 
     }); 
    }; 
    }, 
    increment:() => { 
     return { 
      type: 'INC', 
     } 
    }, 
    decrement:() => { 
     return { 
      type: 'DEC', 
     } 
    } 
}; 

const mapStateToProps = (state) => ({ 
    data: state 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    load: bindActionCreators(actions.load, dispatch), 
}); 

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(First); 

ReactDOM.render(
    <Provider store={store}> 
    <AppContainer/> 
    </Provider> 
    ,document.getElementById('root'));

来源

2016-12-28 user944513

是那些为你工作的进口？ – therewillbecode

在这里寻找与Redux有关的todo应用程序示例以及变量名称的灵感。 http://redux.js.org/docs/basics/ExampleTodoList.html – therewillbecode

@ user944513不会添加react-native标签来反应只有问题。 –

你需要改变你的mapStateToProps和mapDispatchToProps功能接收来自减速器和行动的数据，如

const mapStateToProps = (state) => ({ 
    data: state.abc, 
    digit: state.pqr 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    load: bindActionCreators(actions.load, dispatch), 
    increment: bindActionCreators(actions.increment, dispatch), 
    decrement: bindActionCreators(actions.decrement, dispatch) 
});

PLNKR

来源

2016-12-28 09:26:50

的最简单的方法乌尔德是改变mapDispatchToProps到：

const mapDispatchToProps = (dispatch) => ({ 
    actions: bindActionCreators(actions, dispatch), 
});

和你的听众onClick可以改为：

getData(){ 
    this.props.actions.load(); 
    } 
    inc(){ 
    console.log('ince', this.props) 
    this.props.actions.increment(); 
    } 

    dec(){ 
    console.log('dec') 
    this.props.actions.decrement(); 
    }

来源

2016-12-28 09:32:17

如何使用react和redux递增和递减值？

回答

相关问题