如何在react native中在一个redux中添加多个计数器

Question

我想添加多个计数器，如countA、countV、countR，并想在onPress上更新特定的计数器。但当我更新其中任何一个时。然后所有计数器更新。

这是我在App.js 中尝试的

const initialState={
countA:0,
countV:0,
countR:0,
};

function reducer(state = initialState, action){
switch(action.type){
case "INCREMENTA":
return {
countA: state.countA + 1,
}
case "INCREMENTV":
return {
countV: state.countV + 1,
}
case "INCREMENTR":
return {
countR: state.countR+ 1,
}
default:
return state;
}
}
const store = createStore(reducer);

在screen.js 中

incrementA = () => {
this.props.dispatch({type:"INCREMENTA"})
}
incrementV = () => {
this.props.dispatch({type:"INCREMENTV"})
}
incrementR = () => {
this.props.dispatch({type:"INCREMENTR"})
}
///here is onPress button

const mapStateToProps=(state)=>({
countA:state.countA,
countV:state.countV,
countR:state.countR
})

export default connect(mapStateToProps)(detailScreen);

请忽略它=我想添加多个计数器，如countA、countV、countR，并想在onPress上更新特定计数器。但当我更新其中任何一个时。然后所有计数器更新。我想添加多个计数器，如countA、countV、countR，并想在onPress上更新特定的计数器。但当我更新其中任何一个时。然后所有计数器更新。

Answer 1

在Redux reducers中，您必须返回整个新状态，因此您的代码应该是：

const initialState={
countA:0,
countV:0,
countR:0,
};
function reducer(state = initialState, action){
switch(action.type){
case "INCREMENTA":
return {
...state,
countA: state.countA + 1,
}
case "INCREMENTV":
return {
...state,
countV: state.countV + 1,
}
case "INCREMENTR":
return {
...state,
countR: state.countR+ 1,
}
default:
return state;
}
}
const store = createStore(reducer);